Promise && async/await的理解和用法

為什么需要promise（承諾）這個東西

在之前我們處理異步函數都是用回調這個方法，回調嵌套的時候會發現 閱讀性 和 調試 的難度會增加很多；

怎么理解promise

想象一下，你把一個任務交給一個不錯的小伙子，他叫承諾；不用擔心你交給他的任務會丟失，他總會返回的，做成功了resolve，失敗了reject；

var promise = new Promise((resolve, reject) =>{//交給給“承諾”同學一個異步任務setTimeout(()=>{if(true){// 成功了，返回paramsresolve('params')}else{// 失敗了，返回errorreject('error')}}, 1000) })// 上面是給承諾一個任務，下面是"承諾"同學的返回 promise.then((res)=>{console.log(res) }).catch((rej)=>{ console.log(res) }) 復制代碼

怎么使用promise

實際情況中，異步的場景沒有那么簡單，你可以會遇到下面這些場景

“串行應用場景”下的處理方案

let promise = new Promise((res, rej)=>{asyncFunc('promise', 1000, res, rej) }) promise.then(res=>{console.log(res);return new Promise((res, rej)=>{asyncFunc('second', 2000, res, rej)}) }).then(res=>{console.log(res);return new Promise((res, rej)=>{asyncFunc('third', 1000, res, rej)})// throw 'oh, no!'; }).then(res=>{console.log(res);console.log('endinggggggg') }).catch(err=>{console.log('catch', err) }) 復制代碼

“并行應用場景”的處理方案(即在所有的異步操作完成之后執行)

let promise1 = new Promise((res, rej)=>{asyncFunc('promise1', 1000, res, rej) })let promise2 = new Promise((res, rej)=>{asyncFunc('promise2', 2000, res, rej) })let promise3 = new Promise((res, rej)=>{asyncFunc('promise3', 1000, res, rej) })var promiseAll = Promise.all([promise1, promise2, promise3]) promiseAll.then(res =>{console.log('最終的結果', res) }).catch(err =>{console.log('catch', err); }) 復制代碼

“競速模式下”，如字面意思，只要是哪一個提前完成了。就表示整個狀態處理完成狀態；這個場景可以發散成如果是超過了3s我就不去做這件事情了

let promise1 = new Promise((res, rej)=>{asyncFunc('promise1', 1000, res, rej, true) })let promise2 = new Promise((res, rej)=>{asyncFunc('promise2', 2000, res, rej, true) })let promise3 = new Promise((res, rej)=>{asyncFunc('promise3', 1000, res, rej) })// 1000s的任務完成了，就直接返回promise1了 var promiseRace = Promise.race([promise1, promise2, promise3]) promiseRace.then(res =>{console.log('最終的結果', res) }).catch(err =>{console.log('catch', err); }) 復制代碼

js是單線程，promise，setTimeout的執行優先級

講這一塊的東西就得講講nodejs的事件處理機制；
事件隊列應該是一個數據結構，所有的事情都被事件循環排隊和處理，直到隊列為空。但是Node中的這種情況與抽象反應器模式如何描述完全不同。
下面講的東西只適合V8；

NodeJS中有許多隊列，其中不同類型的事件在自己的隊列中排隊。

在處理一個階段之后并且在移到下一個隊列之前，事件循環將處理兩個中間隊列，直到中間隊列中沒有剩余的項目。

定義：

有四種主要類型，由libuv事件循環處理；

• 過期的定時器和間隔隊列 - （比如使用setTimeout,setInterval）;
• IO事件隊列 - 已完成的IO事件
• Immediates隊列 - 使用setImmediate功能添加回調
• 關閉處理程序隊列 - 任何close事件處理程序

還有2個中間隊列，不屬于libuv本身的一部分，但是是nodejs的一部分；

• Next Ticks Queue - 使用process.nextTick 函數添加回調；（優先級更高）
• 其他微型任務隊列 - 包括其他微型任務，例如已經解決的承諾回調；

如何工作的：

上圖是node中libuv模塊在處理異步I/O操作的流程圖；

Node通過定時器檢查隊列中的任何過期定時器來啟動事件循環，并在每一個步驟中遍歷每一個隊列。如果沒有任務則循環退出，每一次隊列處理都被視為事件循環的一個階段。特別有意思的是中間紅色的隊列，每次階段都會優先去處理中間隊列的任務。然后再去處理其他的隊列。

什么是async/await

async/await 可以是Generator和promise結合實現的；

注意核心點：

• asnyc 函數總是返回一個Promise對象，不論函數是否return Promise；
• await 后面跟著Promise對象，如果不是Promise對象，也會被封裝成Promise；
• async/await 和Promise對象在本質上是一樣的

其他note點

await的任何內容都通過Promise.resolve()傳遞，這樣就可以安全的await非原生Promise；

構造函數以及getter/settings方法不能是異步的；

盡管編寫的是同步的代碼，但是也不要錯失并行執行的機會，不然你需要消耗等待的性能喪失；

Babel REPL 說起來很有趣。試試就知道。

怎么用async/await

實際情況中，異步的場景沒有那么簡單，你可以會遇到下面這些場景

場景：只有一個await并且 resolve

const delay = timeout => new Promise(resolve => setTimeout(resolve, timeout)); async function f(){await delay(1000);await delay(2000);await delay(3000);return 'done' } f().then(v=> console.log(v)); 復制代碼

場景：只有一個await并且 reject

let a; async function g(){await Promise.reject('error');a = await 1; } g().then(v=>console.log(v)).catch(err=>console.log(err)); 復制代碼

場景：有多個await， 可以用try/catch

let a ; async function g(){try{await Promise.reject('error')}catch(err){ console.log(err)}a= await 1;return a; }g().then(v=>console.log(v)).catch(err=>console.log(err));復制代碼

場景：等待平行任務

async function series(){const await1 = delay(1000);const await2 = delay(1000);await await1;await await2;return 'done' } series();復制代碼

歡迎提意見和star

如果有不對的可以提issue
如果覺得對你有幫助可以star下
github

參考文檔

這一系列的文檔講的很不錯 juejin.im/post/5b777f…

講promise，setTimeout優先級的；nodejs中事件循環中的任務優先級 jsblog.insiderattack.net/event-loop-…

developers.google.com域名下面的文檔還是很有質量的，其中會比較全面的介紹怎么去用promise和async/await developers.google.com/web/fundame…

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的Promise async/await的理解和用法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。