這篇文章詳細(xì)講解了JavaScript中的異步函數(shù)。 JavaScript中的異步代碼在很短的時(shí)間內(nèi)從回調(diào)發(fā)展為Promise，再到ES2017的異步函數(shù)，現(xiàn)在我們可以像編寫(xiě)同步代碼那樣編寫(xiě)基于 Promise 的代碼，而且還不會(huì)阻塞主線(xiàn)程。
為什么需要async/await？
當(dāng)promise在ES2015中引入時(shí)，目的是解決異步代碼的問(wèn)題，但是promise不是最終的解決方案。
雖然Promise解決了著名的回調(diào)地獄，但是它自己引入了語(yǔ)法復(fù)雜性。
所以ES2017增加了異步函數(shù)，提高了代碼可讀性，對(duì)不太熟悉 Promise 的人而言，幫助就更大了。
async/await使代碼看起來(lái)像是同步的，但它在后臺(tái)是異步和非阻塞的。
工作原理
異步函數(shù)返回一個(gè)promise，如下例所示：
const doSomethingAsync = () => {
return new Promise((resolve) => {
setTimeout(() => resolve('I did something'), 3000)
})
}
調(diào)用一個(gè)異步函數(shù)時(shí)，您先要設(shè)置一個(gè)await，當(dāng)您 await 某個(gè) Promise 時(shí)，函數(shù)暫停執(zhí)行，直至該 Promise 產(chǎn)生結(jié)果，并且暫停并不會(huì)阻塞主線(xiàn)程。 如果 Promise 執(zhí)行，則會(huì)返回值。 如果 Promise 拒絕，則會(huì)拋出拒絕的值。因?yàn)楫惒胶瘮?shù)去掉了所有回調(diào)。提高了代碼的可讀性，這是一個(gè)例子：
const doSomething = async () => {
console.log(await doSomethingAsync())
}
一個(gè)簡(jiǎn)單的例子
這是異步函數(shù)async / await的簡(jiǎn)單示例：
const doSomethingAsync = () => {
return new Promise((resolve) => {
setTimeout(() => resolve('I did something'), 3000)
})
}
const doSomething = async () => {
console.log(await doSomethingAsync())
}
console.log('Before')
doSomething()
console.log('After')
上面代碼執(zhí)行結(jié)果如下：
Before
After
//after 3s
I did something
Promise詳解
將async關(guān)鍵字添加到任何函數(shù)意味著該函數(shù)將返回一個(gè)promise。即使它沒(méi)有聲明，它也會(huì)在內(nèi)部使它返回一個(gè)promise。
這就是此代碼有效的原因：
const aFunction = async () => {
return 'test'
}
// This will alert 'test'
aFunction().then(alert)
它和以下一樣：
const aFunction = async () => {
return Promise.resolve('test')
}
// This will alert 'test'
aFunction().then(alert)
代碼更易讀
正如上面示例所見(jiàn)，與回調(diào)和promise代碼相比，異步函數(shù)代碼看起來(lái)非常簡(jiǎn)單。
我們下面用更復(fù)雜一點(diǎn)的代碼來(lái)演示。
例如，以下是使用promises獲取JSON資源并解析它的方法：
const getFirstUserData = () => {
// get users list
return fetch('/users.json')
// parse JSON
.then(response => response.json())
// pick first user
.then(users => users[0])
// get user data
.then(user => fetch(`/users/${user.name}`))
// parse JSON
.then(userResponse => response.json())
}
getFirstUserData()
以下是使用await / async提供的相同功能：
const getFirstUserData = async () => {
// get users list
const response = await fetch('/users.json')
// parse JSON
const users = await response.json()
// pick first user
const user = users[0]
// get user data
const userResponse = await fetch(`/users/${user.name}`)
// parse JSON
const userData = await user.json()
return userData
}
getFirstUserData()
鏈接多個(gè)異步函數(shù)
異步函數(shù)可以非常容易地鏈接，并且語(yǔ)法比簡(jiǎn)單的promise更具可讀性：
const promiseToDoSomething = () => {
return new Promise(resolve => {
setTimeout(() => resolve('I did something'), 10000)
})
}
const watchOverSomeoneDoingSomething = async () => {
const something = await promiseToDoSomething()
return something + ' and I watched'
}
const watchOverSomeoneWatchingSomeoneDoingSomething = async () => {
const something = await watchOverSomeoneDoingSomething()
return something + ' and I watched as well'
}
watchOverSomeoneWatchingSomeoneDoingSomething().then((res) => {
console.log(res)
})
將打?。?/p>
I did something and I watched and I watched as well
調(diào)試更簡(jiǎn)單
調(diào)試promise很難，因?yàn)檎{(diào)試器不會(huì)調(diào)試異步代碼。
Async / await使得這非常簡(jiǎn)單，因?yàn)榫拖裾{(diào)試同步代碼一樣。
