Promise與異步

JavaScript中的異步有多種實現(xiàn)的方式。
在ES5的時候,最多的使用應該是回調(diào)函數(shù)的形式,比如下面的代碼:

Callback

比如一個異步對一個異步之間有依賴的時候就需要一步一步的縮進調(diào)用不同的異步方法,看起來來可讀性就會比較差。所以在ES6之后就有了更多的異步寫法。

Promise

Promise是最常見的異步用法。
Promise是一個JS內(nèi)置對象,這個對象接受一個函數(shù)作為參數(shù),函數(shù)中又會傳入兩個函數(shù),第一個是成功后調(diào)用的函數(shù),第二個是失敗后調(diào)用的函數(shù)。
它返回一個promise對象,它有兩個方法,分別是then和catch, then方法是promise成功后的回調(diào),catch是失敗后的回調(diào),then的第二個回調(diào)也可以作為catch使用。
這個對象如圖所示:有三種狀態(tài)

Promise

pending: 初始化的狀態(tài),在沒調(diào)用resolve, reject或者拋出異常之前就是pending狀態(tài)。
fulfilled/reslove: 成功的狀態(tài),在調(diào)用reslove后promise會變?yōu)槌晒Φ臓顟B(tài),resolve調(diào)用時的參數(shù)會傳入then函數(shù)中。
rejected: 失敗后的狀態(tài),在調(diào)用reject或者拋出異常之后promise就會變?yōu)閞ejected狀態(tài),reject或者拋出的異常會作為catch的參數(shù)。
這是Promise的簡單介紹,下面的代碼中介紹了Promise的所有API,比如有下面兩個Promise:

Promise

promise1和promise2分別接受一個參數(shù)并且返回一個Promise,這個Promise會根據(jù)參數(shù)返回相應的響應。Promise有四個參數(shù):

Promise.all


Promise.all

Promise.all()接受多個promise作為參數(shù),當所有的參數(shù)promise成為resolve狀態(tài)后promiseAll就會成功resolve狀態(tài),resolve的參數(shù)是傳入的promise reolve參數(shù)的一個列表,如果有一個reject,整個promiseAll就會變?yōu)閞eject狀態(tài):

Promise.all

Promise.race


Promise.race

Promise.race接受的參數(shù)和Promise.all相同,但是當參數(shù)中有一個resolve后,promiseRace就會變?yōu)閞eslove狀態(tài),resolve的參數(shù)就是第一個resolve的promise的參數(shù)。我們上面的promise2返回比較快,所以輸出就是msg2

Promise.race

Promise.reslove, Promise.reject

Promise.reslove, Promise.reject

Promise.reject會返回一個狀態(tài)為rejected的promise,reject的參數(shù)為傳入的參數(shù),所以Promise.reject返回的Promise只會catch到傳入的參數(shù)。
Promise.then的參數(shù)如果不是一個promise,那么就返回一個狀態(tài)為resloved的promise,reslove參數(shù)就是調(diào)用reslove傳入的參數(shù)。
如果傳入的參數(shù)是一個Promise,那么返回的就是這個傳入的Promise,也就是一個pending狀態(tài)的promise,仍然可能會reslove或者reject。

Promise.reslove

所以說當我們調(diào)用reslove回調(diào)函數(shù)的時候如果傳入一個promise,那么返回的就是這個傳入的promise,返回的promise就又可以有了新的reslove狀態(tài)或者reject狀態(tài)。
對于之前的兩個Promise,寫起來就能看起來舒服一些。

Promise

then函數(shù)的返回值就就會作為Promise.reslove()的參數(shù),所以then(logres1)后返回了promise2(res1),就會有了新的promise,可以繼續(xù)then下去。結果會是這樣:

Promise

雖然Promise讓我們的寫法看起來舒服了一些,當時還有更好的寫法。

Async/Await

Async是一種函數(shù)的形式,定義如下:

async function fn() {
  let res1 = await promise1('msg1')
  console.log(res1)
  let res2 = await promise2(res1)
  console.log(res2)
}

在async函數(shù)和普通函數(shù)用法上的區(qū)別是我們可以在它內(nèi)部寫await表達式,await表達是后可以寫一個promise,當promise reslove后res1就會等于
reslove傳入的參數(shù),在打印出來,用try catch 就可以捕獲reject的情況,起到promise中reject的作用,上面寫法的效果和之前的promise是相同的:

Async/Await
最后編輯于
?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容