本文轉(zhuǎn)自我的博客閱讀原文献雅。
整體感知
async/await提供給我們一種同步的方式來(lái)編寫(xiě)異步代碼。如果去掉await關(guān)鍵字啦辐，下面這段異步代碼就跟我們常見(jiàn)的同步代碼別無(wú)二致了趁矾。
// 定義一個(gè)返回Promise對(duì)象的函數(shù)
function fn() {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(30)
}, 1000)
})
}
// 然后利用async/await來(lái)完成代碼
const foo = async() => {
const t = await fn()
console.log(t)
console.log('next code')
}
foo()
// 30
// next code
更進(jìn)一步
前世————Generator函數(shù)
async/await的前世是ES6提供的Generator函數(shù)。那么下面來(lái)瞧一瞧Generator函數(shù)是個(gè)什么鬼荧飞。
function* gen(x) {
var y = yield x + 2
return y
}
var g = gen(1)
g.next() // { value: 3, done: false }
g.next() // { value: undefined, done: true }
簡(jiǎn)單粗暴地說(shuō)，Generator函數(shù)就是一種可以暫停執(zhí)行的函數(shù)名党。我們?cè)谡{(diào)用Generator函數(shù)時(shí)叹阔，會(huì)返回一個(gè)內(nèi)部指針（即遍歷器）。繼續(xù)調(diào)用這個(gè)內(nèi)部指針的next方法才會(huì)執(zhí)行Generator函數(shù)體中的語(yǔ)句传睹，然后遇到以yield關(guān)鍵字則會(huì)暫停執(zhí)行耳幢，知道再一次調(diào)用next方法。
調(diào)用遍歷器的next方法會(huì)返回形如{value: xx, done: bool}的對(duì)象欧啤。value接收yield之后的值睛藻，done表示函數(shù)是否執(zhí)行完畢。
遍歷器的next方法可以接收外部傳入的參數(shù)邢隧，該參數(shù)將會(huì)被當(dāng)作上一個(gè)yield的值參與運(yùn)算店印。
下面看看如何用Generator函數(shù)來(lái)實(shí)現(xiàn)異步操作：
var fetch = require('node-fetch')
function* gen(){
var url = 'https://api.github.com/users/github'
var result = yield fetch(url)
console.log(result.bio)
}
/* 執(zhí)行這段代碼如下 */
var g = gen();
// result得到的是一個(gè)Promise對(duì)象
var result = g.next();
result.value.then(function(data){
return data.json();
}).then(function(data){
// 得到異步返回的數(shù)據(jù)之后調(diào)用下一個(gè)next，并且將數(shù)據(jù)傳進(jìn)next方法
g.next(data);
});
async/await
為什么要用async
async函數(shù)是什么倒慧？一句話(huà)吱窝，它就是Generator函數(shù)的語(yǔ)法糖。
上面我們利用Generator函數(shù)封裝了異步操作迫靖，但是那種寫(xiě)法比較別扭院峡。首先，我們要將異步操作用Promise封裝起來(lái)系宜，其次照激，當(dāng)異步完成之后進(jìn)行下一個(gè)操作時(shí)，需要手動(dòng)地調(diào)用next方法盹牧。
async函數(shù)的出現(xiàn)俩垃，就彌補(bǔ)了我們提到的不足：
async function getStockPriceByName(name) {
// 正常情況下励幼，await命令后面是一個(gè) Promise 對(duì)象。如果不是口柳，會(huì)被轉(zhuǎn)成一個(gè)立即resolve的 Promise 對(duì)象苹粟。
var symbol = await getStockSymbol(name)
var stockPrice = await getStockPrice(symbol)
return stockPrice
}
// async函數(shù)返回一個(gè)Promise對(duì)象。async函數(shù)內(nèi)部return語(yǔ)句返回的值跃闹，會(huì)成為then方法回調(diào)函數(shù)的參數(shù)嵌削。
getStockPriceByName('goog').then(function (result) {
console.log(result)
})
不讓前面的錯(cuò)誤影響后面的操作
有時(shí)，我們希望即使前一個(gè)異步操作失敗望艺，也不要中斷后面的異步操作苛秕。這時(shí)可以將第一個(gè)await放在try...catch結(jié)構(gòu)里面，這樣不管這個(gè)異步操作是否成功找默，第二個(gè)await都會(huì)執(zhí)行艇劫。
async function f() {
try {
await Promise.reject('出錯(cuò)了')
} catch(e) {
}
// 即使await后面的語(yǔ)句報(bào)錯(cuò)，下面這個(gè)await還是會(huì)執(zhí)行
return await Promise.resolve('hello world')
}
f()
.then(v => console.log(v))
// hello world
錯(cuò)誤處理
await命令后面的Promise對(duì)象惩激，運(yùn)行結(jié)果可能是rejected店煞，所以最好把a(bǔ)wait命令放在try...catch代碼塊中。如果await后面的異步操作出錯(cuò)风钻，那么等同于async函數(shù)返回的 Promise 對(duì)象被reject浅缸。
async function myFunction() {
try {
await somethingThatReturnsAPromise()
} catch (err) {
console.log(err)
}
}
// 另一種寫(xiě)法
async function myFunction() {
await somethingThatReturnsAPromise()
.catch(function (err) {
console.log(err)
});
}
并發(fā)的異步
上面的寫(xiě)法都是處理繼發(fā)狀況，下面來(lái)說(shuō)說(shuō)并發(fā)異步的處理：
// 寫(xiě)法一
let [foo, bar] = await Promise.all([getFoo(), getBar()])
// 寫(xiě)法二
let fooPromise = getFoo()
let barPromise = getBar()
let foo = await fooPromise
let bar = await barPromise
