本篇內(nèi)容主要講解“promise是不是es6的”,感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷,實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“promise是不是es6的”吧!
漳平網(wǎng)站制作公司哪家好,找創(chuàng)新互聯(lián)公司!從網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)站建設(shè)、微信開(kāi)發(fā)、APP開(kāi)發(fā)、響應(yīng)式網(wǎng)站開(kāi)發(fā)等網(wǎng)站項(xiàng)目制作,到程序開(kāi)發(fā),運(yùn)營(yíng)維護(hù)。創(chuàng)新互聯(lián)公司于2013年創(chuàng)立到現(xiàn)在10年的時(shí)間,我們擁有了豐富的建站經(jīng)驗(yàn)和運(yùn)維經(jīng)驗(yàn),來(lái)保證我們的工作的順利進(jìn)行。專注于網(wǎng)站建設(shè)就選創(chuàng)新互聯(lián)公司。
是的。promise是ECMAScript 6新增的引用類型,表示一個(gè)異步操作的最終完成或者失敗。promise是解決異步編程調(diào)用代碼邏輯編寫過(guò)于復(fù)雜的問(wèn)題的,當(dāng)網(wǎng)絡(luò)請(qǐng)求非常復(fù)雜時(shí),就會(huì)出現(xiàn)回調(diào)地獄,這樣如果將這些代碼寫在一起就會(huì)看起來(lái)很復(fù)雜,且不利于閱讀,如果用promise的話就會(huì)讓代碼看起來(lái)更加美觀優(yōu)雅。
ECMAScript 6 增加了對(duì) Promises/A+ 規(guī)范的完善支持,即 Promise 類型。一經(jīng)推出,Promise 就大受歡迎,成為了主導(dǎo)性的異步編程機(jī)制。所有現(xiàn)代瀏覽器都支持 ES6 期約,很多其他瀏覽器 API 也以期約為基礎(chǔ)。
Promise 是 ECMAScript 6 新增的引用類型,表示一個(gè)異步操作的最終完成或者失敗。
promise函數(shù)是解決異步編程調(diào)用代碼邏輯編寫過(guò)于復(fù)雜的問(wèn)題的,當(dāng)網(wǎng)絡(luò)請(qǐng)求非常復(fù)雜時(shí),就會(huì)出現(xiàn)回調(diào)地獄,這樣如果將這些代碼寫在一起就會(huì)看起來(lái)很復(fù)雜,且不利于閱讀,如果用promise的話就會(huì)讓代碼看起來(lái)更加美觀優(yōu)雅
首先, 當(dāng)我們開(kāi)發(fā)中有異步操作時(shí), 就可以給異步操作包裝一個(gè)Promise
異步操作之后會(huì)有三種狀態(tài)
pending:等待狀態(tài),比如正在進(jìn)行網(wǎng)絡(luò)請(qǐng)求,或者定時(shí)器沒(méi)有到時(shí)間。
fulfill:滿足狀態(tài),當(dāng)我們主動(dòng)回調(diào)了resolve時(shí),就處于該狀態(tài),并且會(huì)回調(diào).then()
reject:拒絕狀態(tài),當(dāng)我們主動(dòng)回調(diào)了reject時(shí),就處于該狀態(tài),并且會(huì)回調(diào).catch()
1.出于未決狀態(tài)的函數(shù)是同步的 會(huì)立即執(zhí)行
2.then和catch是異步的 就算promise對(duì)象里面沒(méi)有異步操作 讓then方法或者catch立即執(zhí)行 那么 這里兩個(gè)方法或被加入到事件隊(duì)列中等待執(zhí)行
//參數(shù) 函數(shù)(resolve,reject)
new Promise((resolve, reject) => {
setTimeout(() => {
//請(qǐng)求成功的時(shí)候調(diào)用resolve
resolve('22222')
//請(qǐng)求失敗的時(shí)候調(diào)用reject
reject('error message')
}, 1000)
}).then((data) => { //請(qǐng)求成功處理函數(shù)
console.log(data)
}).catch((err) => { //請(qǐng)求失敗處理函數(shù)
console.log(err)
})
1、在未決狀態(tài)的處理函數(shù)中 如果發(fā)生未捕獲的錯(cuò)誤呀 那么狀態(tài)就會(huì)有pending 直接變成 rejected狀態(tài) 并且可以被catach捕獲
var pro = new Promise((resolve, reject) => {
throw new Error("123");
// try{
// throw new Error("123");
// } catch(e) {}
resolve(12);
reject(34);
})
// pro.then(data => {
// console.log(data);
// }, err => {
// console.log(err);
// })
console.log(pro);
pro.then(data => {
console.log(data);
})
pro.catch(data => {
console.log(data);
})
1.使用Promise:
const makeRequest = () =>
getJSON().then(data => {
console.log(data)
return "done"
})
makeRequest()
2.使用Async:
async和await 是ES7提出來(lái)的
async作用:簡(jiǎn)化函數(shù)返回值中promise對(duì)象的創(chuàng)建
一般情況下, async寫在函數(shù)的最前面,被修飾的函數(shù)的返回值 ,一定是promise對(duì)象。只有在某些特殊情況下 才會(huì)手動(dòng)返回一個(gè)promise對(duì)象。
作用:和promise一樣 解決異步問(wèn)題 但是他的好處在于 讓異步代碼和同步的一樣!!
注意點(diǎn) : 同步方法我們拿到結(jié)果 是通過(guò)返回值,異步方法拿到結(jié)果,是靠回調(diào)函數(shù)。
async 和await使用的基本語(yǔ)法:
就是在普通函數(shù)前面加一個(gè)async 調(diào)用跟普通函數(shù)一樣
async出現(xiàn)使用 一般都要和await配合使用
await后面接的就是一個(gè)promise對(duì)象 await一定是在異步函數(shù)中使用的
const makeRequest = async () => {
// await getJSON()表示console.log會(huì)等到getJSON的promise成功reosolve之后再執(zhí)行。
console.log(await getJSON)
return "done"
}
makeRequest()
3.區(qū)別
1.函數(shù)前面多了一個(gè)aync關(guān)鍵字。await關(guān)鍵字只能用在aync定義的函數(shù)內(nèi)。async函數(shù)會(huì)隱式地返回一個(gè)promise,該promise的reosolve值就是函數(shù)return的值。(示例中reosolve值就是字符串”done”)
2.我們不能在最外層代碼中使用await,因?yàn)椴辉赼sync函數(shù)內(nèi)。
var r1 = new Promise((resolve,reject) => {
setTimeout(function(){
resolve("我是第一個(gè)請(qǐng)求");
},1000)
})
var r2 = new Promise((resolve,reject) => {
setTimeout(function(){
resolve("我是第二個(gè)請(qǐng)求");
},3000)
})
var r3 = new Promise((resolve,reject) => {
setTimeout(function(){
resolve("我是第三個(gè)請(qǐng)求");
},4000)
})
var r4 = new Promise((resolve,reject) => {
setTimeout(function(){
resolve("我是第四個(gè)請(qǐng)求");
},500)
})
有時(shí)候我們需要等待兩個(gè)或者多個(gè)請(qǐng)求都成功返回了再進(jìn)行下一步操作,promise 的all方法是等所有的異步請(qǐng)求完成之后在進(jìn)行下一步回調(diào)
Promise.all([r1,r2,r3,r4]).then(data => {
console.log(data);
})
請(qǐng)求同時(shí)發(fā)送出去 誰(shuí)先回來(lái) 就是用誰(shuí)的數(shù)據(jù)。
五.promise封裝ajax案例Promise.race([r1,r2,r3,r4]).then(data => {
console.log(data);
})
到此,相信大家對(duì)“promise是不是es6的”有了更深的了解,不妨來(lái)實(shí)際操作一番吧!這里是創(chuàng)新互聯(lián)網(wǎng)站,更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢,關(guān)注我們,繼續(xù)學(xué)習(xí)!