1. 程式人生 > >ES6或ES7 中async函式的用法,通過一段程式碼理解它的用法

ES6或ES7 中async函式的用法,通過一段程式碼理解它的用法

ES6或ES7 中async函式的用法,一行一行看完程式碼和後面的解釋,應該就會用了吧


程式碼截圖
首先,如果不懂Promise的用法,那可能你看不懂這裡寫的async的用法。

上面是async使用例子,async是非同步操作的新方案,asyncPrint函式中第21行的await是關鍵字,
await後面跟一個函式a,a必須是要返回Promise物件的,因為這也是用法的一部分內容,所返回的Promise物件就包含了非同步操作。
21行執行到await時,a返回的Promise物件就會被執行,
當Promise裡面的resolve被呼叫時,await就返回,並且resolve的引數就是await的返回值,
第5行執行resolve,返回字串“aback”,第21行x被賦值“aback”,

所以,本質上,await調起了a返回的Promise,然後還調起了Promise的then,then的引數就是Promise的回撥函式,其實也就是Promise的resolve,呼叫resolve的時候,本質上是呼叫了傳給then的回撥函式。
那傳給then的回撥函式究竟是什麼呢,就是await後續要執行的語句,至於怎麼做到的,不是你要關心的,反正它就是能做到。
因為Promise的then執行的回撥拿到的引數就是resolve傳進去的引數,所以await返回的就是第5行resolve返回的引數,

然後asyncPrint函式第二次調起await呼叫的是b,因為resolve是非同步的,所以在b返回的Promise裡面,兩個console.log會先執行,
再到resolve執行,

最後,async函式,返回的是Promise物件,所以,最後一行呼叫asyncPrint函式後,可以緊跟著then函式,
async函式裡面的return就是傳給then的回撥函式的引數,
async函式裡面的return不是async函式的返回值,Promise物件才是它的返回值,return的內容會作為引數傳給then的回撥

最後打印出來的結果如下:
11
a2
a3
aback
b2
b3
bback
xxx
33

列印完“11”,“a2”,“a3”之後,會等2秒,再繼續列印後面的內容。

最後再按順序走一遍程式碼:
1、執行asyncPrint(“xxx”, 2000)
2、在20行列印“11”
3、在21行遇到await,調起a返回的Promise,傳給a的引數ms就是2000,
4、到第3行,列印“a2”,
5、第4行設定timeout,第7行列印“a3”,
6、過了2秒timeout時間到,到第5行,調起resolve,傳引數“aback”
7、如果你會用Promise,就知道調起resolve本質上是調起傳給then的回撥函式,但這裡調起Promise的then方法這個行為是看不見的,是暗中調起,傳給then的回撥函式就是await後續執行的所有語句,所以,可以認為,在Promise裡面遇到resolve就會從await返回,返回值是傳給resolve的引數。
8、回到第21行,x得到賦值“aback”
9、列印“aback”
10、第23行遇到await,執行b返回的Promise,
11、第13行列印“b2”
12、第14行遇到resolve,但resolve本質上是呼叫回撥函式,是非同步的,所以先往下執行當前函式的同步程式碼,所以這裡繼續往下執行第15行列印“b3”
13、執行第14行resolve,相當於await返回,回到23行,返回值是resolve的引數“bback”,
14、第25行,列印asyncPrint函式的引數value,一開始傳進去的值是“xxx”,所以這裡列印“xxx”
15、第26行返回“33”結束函式,
16、回到29行,asyncPrint返回的其實是Promise,然後呼叫then,傳給then的回撥函式接收一個引數z,這個引數的值就是asyncPrint函式最後的返回值“33”,所以最後列印“33”