如果你錯過了胎撤，那么 Node 7.6 開始支持 async/await 了。如果你還沒有嘗試過它，這里有一大堆理由和例子告訴你為什么要不顧一切的直接使用它送火。
[更新]：Node 8 LTS 已經(jīng)發(fā)布虏束，完整支持 Async/Await
[編輯]：嚴格來說的嵌入式代碼并不在中等規(guī)模的原生應用程序執(zhí)行，而是工作在移動瀏覽器上金赦。如果你正在應用程序上讀這篇文章跳昼，點擊共享圖標并選擇“在瀏覽器中打開”以查看代碼片段。（譯注敲霍，需進入原文鏈接）
Async/await 101
Async/await 101
對于那些還沒有聽說過這篇文章主題的人俊马，這篇文章可以帶你快速入門。
- Async/await 是一種編寫異步代碼的新方法肩杈。曾經(jīng)編寫異步代碼都使用回調(diào)函數(shù)和 promise柴我。
- Async/await 是建立在 promise 之上的，它不能被用作回調(diào)函數(shù)锋恬。
- Async/await 像 promise 一樣是非阻塞的屯换。
- Async/await 使得異步代碼看上去更像是同步代碼，這就是它最強大的地方
語法
假設一個 getJSON 函數(shù)返回一個 promise 對象与学，并且這個 promise 對象接受了 JSON 對象彤悔。我們僅僅想調(diào)用它輸出 JSON 并返回 'done'。
以下是利用 promise 實現(xiàn)它索守。
const makeRequest = () =>
getJSON()
.then(data => {
console.log(data)
return "done"
})
makeRequest()
以下是使用 async/await 實現(xiàn)。
const makeRequest = async () => {
console.log(await getJSON())
return "done"
}
makeRequest()
這里有一些區(qū)別
- 在我們的函數(shù)之前有 async 關鍵字卵佛，await 關鍵字只能在定義了 async 的函數(shù)中使用杨赤。所有的 async function 都會默認的返回一個 promise 對象，promise 中的 resolve 值就是異步函數(shù)返回的值截汪。（例子中是 'done'）
- 以上幾點表明我們不能在代碼頂層使用 await疾牲，因為它并不在一個 async function 內(nèi)。
// 該行在頂層衙解，無法執(zhí)行
// await makeRequest()
// 該行可以執(zhí)行
makeRequest().then((result) => {
// do something
})
-
await getJSON()表示console.log等到getJSON()的 promise 執(zhí)行結(jié)束后執(zhí)行阳柔，并打印它的值。
為什么它更好
1. 簡潔明了
看看有多少代碼不需要寫了蚓峦！即使在上面精心設計的例子中舌剂，我們也清楚地保存了大量的代碼济锄。我們不需要編寫 .then，創(chuàng)建一個匿名函數(shù)來處理響應霍转，或者給不需要使用的變量一個名字'data'荐绝。我們還避免了代碼嵌套。在下面這個例子中避消，這些小優(yōu)點很快的一點點累加低滩，變得更明顯。
// 譯注：作者似乎遺漏了這里的例子岩喷，翻譯時這里使用了上文中已有的例子
const makeRequest = async () => {
console.log(await getJSON())
return "done"
}
makeRequest()
2. 錯誤處理
Async/await 使得可以建立一個傳統(tǒng)的 try/catch 就能夠同時處理同步和異步錯誤委造。在下面的示例中使用 promise，當 JSON.parse 失敗時均驶，try/catch 無法處理其中的錯誤，因為錯誤發(fā)生在 promise 內(nèi)部枫虏。我們需要在 promise 上調(diào)用 .catch 并復制我們的錯誤處理代碼妇穴。時不會因為它在保證發(fā)生JSON.parse失敗處理。我們需要打電話隶债，趕在承諾和重復我們的錯誤處理代碼腾它，在你編寫完成的代碼中，這（理想的）比 console.log 更復雜死讹。
const makeRequest = () => {
try {
getJSON()
.then(result => {
// this parse may fail
const data = JSON.parse(result)
console.log(data)
})
// uncomment this block to handle asynchronous errors
// .catch((err) => {
// console.log(err)
// })
} catch (err) {
console.log(err)
}
}
現(xiàn)在瞒滴，來看看 async/await 寫的相同的代碼。現(xiàn)在赞警，catch 塊將會處理解析錯誤妓忍。
const makeRequest = async () => {
try {
// this parse may fail
const data = JSON.parse(await getJSON())
console.log(data)
} catch (err) {
console.log(err)
}
}
3. 條件句
試想下面這段代碼獲取一些數(shù)據(jù)然后決定應該返回它還是基于其中一些值在獲取更多的數(shù)據(jù)。
const makeRequest = () => {
return getJSON()
.then(data => {
if (data.needsAnotherRequest) {
return makeAnotherRequest(data)
.then(moreData => {
console.log(moreData)
return moreData
})
} else {
console.log(data)
return data
}
})
}
這段代碼看上去就很頭疼愧旦。在那些嵌套（6層）中世剖，很容易丟失括號和那些用來向 promise 傳播最終結(jié)果的 return 語句。
當我們用 async/await 重寫這個例子后就變得更易讀了笤虫。
const makeRequest = async () => {
const data = await getJSON()
if (data.needsAnotherRequest) {
const moreData = await makeAnotherRequest(data);
console.log(moreData)
return moreData
} else {
console.log(data)
return data
}
}
4. 中間量
你可能發(fā)現(xiàn)旁瘫，當你調(diào)用 promise1 而后使用它的返回值調(diào)用 promise2，之后在使用前兩個 promise 的結(jié)果調(diào)用 promise3 時琼蚯，你的代碼很可能像這樣：
const makeRequest = () => {
return promise1()
.then(value1 => {
// do something
return promise2(value1)
.then(value2 => {
// do something
return promise3(value1, value2)
})
})
}
如果 promise3 不需要 value1酬凳，可以很簡單的將 promise 展開成一個很小的嵌套，如果你不喜歡這樣寫遭庶，你可以把 value1 和 value2 放到一個 Promise.all 中以避免深度的嵌套宁仔，像這樣：
const makeRequest = () => {
return promise1()
.then(value1 => {
// do something
return Promise.all([value1, promise2(value1)])
})
.then(([value1, value2]) => {
// do something
return promise3(value1, value2)
})
}
這個方法為了可讀性犧牲了語義。這里沒有理由將 value1 和 value2 放在同一個數(shù)組里罚拟，僅僅是為了避免 promise 嵌套台诗。
同樣的邏輯配合 async/await 變得非常簡單和直觀完箩。在你努力讓 promise 看上去不那么無聊的時間里，你驚訝的發(fā)現(xiàn)所有的事情都已經(jīng)完成拉队。
const makeRequest = async () => {
const value1 = await promise1()
const value2 = await promise2(value1)
return promise3(value1, value2)
}
5. 錯誤攻擊
想象一塊代碼鏈式地調(diào)用了許多 promise弊知，但其中某個地方拋出了一個錯誤。
const makeRequest = () => {
return callAPromise()
.then(() => callAPromise())
.then(() => callAPromise())
.then(() => callAPromise())
.then(() => callAPromise())
.then(() => {
throw new Error("oops");
})
}
makeRequest()
.catch(err => {
console.log(err);
// output
// Error: oops at callAPromise.then.then.then.then.then (index.js:8:13)
})
錯誤棧從 promise 鏈中返回粱快，但被沒有關于哪里發(fā)生了錯誤的線索秩彤。更糟糕的是，這具有誤導性事哭，它所包含的唯一函數(shù)名是 callAPromise 漫雷，這個函數(shù)名和錯誤毫無關系（文件和行號的仍然是有用的）。
然而鳍咱，async/await 的錯誤棧會指向包含錯誤的函數(shù)降盹。
const makeRequest = async () => {
await callAPromise()
await callAPromise()
await callAPromise()
await callAPromise()
await callAPromise()
throw new Error("oops");
}
makeRequest()
.catch(err => {
console.log(err);
// output
// Error: oops at makeRequest (index.js:7:9)
})
當您在本地環(huán)境中開發(fā)并在編輯器中打開文件時，這并不是一個巨大的好處谤辜，但是當您試圖理解來自您的生產(chǎn)服務器的錯誤日志時蓄坏，它是非常有用的。在這種情況下丑念，了解錯誤發(fā)生在 makeRequest 比知道錯誤來自一個 then 之后的 then 之后的 then …… 更好涡戳。
6. 調(diào)試
最后一點，依然很重要脯倚，async/await 是調(diào)試的的殺手锏渔彰，使用起來十分輕松。調(diào)試 promise 十分痛苦有 2 個原因：
- 你無法在返回表達式的箭頭函數(shù)中設置斷點（沒有函數(shù)體）
- 如果你在一個
.then塊中設置斷點推正，并且使用如單步調(diào)試這樣的調(diào)試快捷方式恍涂，調(diào)試器不會移動到下一個.then，因為它僅僅可以一步步的走過同步代碼植榕。
通過 async/await 你就不需要那些箭頭函數(shù)了曾撤，你可以單步通過 await 調(diào)用闯估，確切來將就像同步調(diào)用一樣。
結(jié)論
Async/await 是過去幾年已經(jīng)被加入 JavaScript 中十分具有革命性的特性之一。它使得你可實現(xiàn) 大量異步的 promise 龙誊，并提供一種直接的代替方案熊咽。
關注
在你使用這個特性的時候可能會報有一些懷疑儒将。它是的異步代碼變得不明確：我們知道當我們用眼睛看到一個回調(diào)函數(shù)或者 .then 的時候就會判斷這是段異步代碼卿闹。我們需要幾周的時間來讓我們的的眼睛適應這些新的符號，但 C# 已經(jīng)有這個特點多年竞端，熟悉的人就知道這很小的屎即、暫時的不便是值得的。
Node 7 并不是長期支持的發(fā)布版：是的，Node 8 下個月即將來了技俐，并且把你的代碼移植的新版本將不費吹灰之力乘陪。[更新]: Node 8 LTS 已經(jīng)來了.
關注原作者 twitter @imgaafar
