Async/await 是隨 ES2017 版本在 JAVAScript 中引入的一種語(yǔ)言功能,可在 JavaScript 中啟用異步、非阻塞行為。 它建立在promise之上,提供了一種更簡(jiǎn)單、更清晰的方式來(lái)處理異步代碼。 Async/await 使得編寫(xiě)看起來(lái)和行為都像同步代碼的異步代碼成為可能,使其更易于閱讀和理解。
在這篇博文中,我們將介紹 async/await 的基礎(chǔ)知識(shí)及其工作原理,以及如何在代碼中使用它的一些實(shí)際示例。
什么是is Async/Await?
Async/await 是一種處理 JavaScript 中異步代碼的語(yǔ)法。 它允許您使用 async 和 await 關(guān)鍵字編寫(xiě)看起來(lái)和行為都像同步代碼的異步代碼。
這是 async/await 的一個(gè)簡(jiǎn)單示例:
async function getData() {
const response = await fetch('https://api.example.com/data');
const data = await response.json();
return data;
}
async 關(guān)鍵字表示該函數(shù)是異步的并返回一個(gè)承諾。 await 關(guān)鍵字用于在繼續(xù)執(zhí)行下一行代碼之前等待承諾解決。 在上面的示例中,await 關(guān)鍵字用于等待 fetch 調(diào)用完成以及 response.json() 調(diào)用解析。
Async/await 使得編寫(xiě)看起來(lái)和行為像同步代碼,使其更易于閱讀和理解。 它還使編寫(xiě)和維護(hù)異步代碼變得更加容易,因?yàn)槟槐靥幚沓兄Z的復(fù)雜性。
Async/Await 如何工作?
Async/await建立在 promises 之上,它依賴于 Promise.prototype.then() 方法來(lái)處理異步行為。
以下是 async/await 工作原理的分解:
當(dāng)一個(gè)異步函數(shù)被調(diào)用時(shí),它返回一個(gè)承諾。在異步函數(shù)內(nèi)部,您可以使用 await 關(guān)鍵字等待承諾解決。如果承諾解決,則返回承諾的值。 如果承諾被拒絕,則會(huì)拋出錯(cuò)誤。這是一個(gè)使用 await 關(guān)鍵字等待承諾解決的異步函數(shù)示例:
async function getData() {
try {
const response = await fetch('https://api.example.com/data');
const data = await response.json();
return data;
} catch (error) {
console.error(error);
}
}
在此示例中,await 關(guān)鍵字用于等待 fetch 調(diào)用完成以及 response.json() 調(diào)用解析。 如果 promise 被拒絕(例如,如果進(jìn)行 fetch 調(diào)用時(shí)出錯(cuò)),錯(cuò)誤將在 catch 塊中捕獲并記錄到控制臺(tái)。
使用Async/Await
現(xiàn)在我們對(duì) async/await 的工作原理有了基本的了解,讓我們看一些如何在代碼中使用它的實(shí)際示例。
發(fā)出異步 HTTP 請(qǐng)求
async/await 的一個(gè)常見(jiàn)用例是發(fā)出異步 HTTP 請(qǐng)求。 使用 async/await 可以輕松地并行執(zhí)行多個(gè) HTTP 請(qǐng)求,并在繼續(xù)執(zhí)行代碼中的下一步之前等待結(jié)果。
下面是使用 async/await 并行發(fā)出多個(gè) HTTP 請(qǐng)求的示例:
async function getData() {
const [response1, response2, response3] = await Promise.all([
fetch('https://api.example.com/data1'),
fetch('https://api.example.com/data2'),
fetch('https://api.example.com/data3')
]);
const data1 = await response1.json();
const data2 = await response2.json();
const data3 = await response3.json();
console.log(data1, data2, data3);
}
在此示例中,我們使用 Promise.all() 方法并行發(fā)出多個(gè) HTTP 請(qǐng)求。 await 關(guān)鍵字用于在將結(jié)果數(shù)據(jù)記錄到控制臺(tái)之前等待所有承諾完成。
處理錯(cuò)誤
使用 async/await 時(shí)處理錯(cuò)誤很重要,就像處理任何其他異步代碼一樣。 要處理異步函數(shù)中的錯(cuò)誤,您可以使用 try 和 catch 關(guān)鍵字。
以下是如何處理異步函數(shù)中的錯(cuò)誤的示例:
async function getData() {
try {
const response = await fetch('https://api.example.com/data');
const data = await response.json();
return data;
} catch (error) {
console.error(error);
}
}
在此示例中,try 塊包含可能引發(fā)錯(cuò)誤的代碼,而 catch 塊包含將處理錯(cuò)誤的代碼。 如果在 try 塊中拋出錯(cuò)誤,它將在 catch 塊中捕獲并記錄到控制臺(tái)。
鏈接異步函數(shù)
異步函數(shù)可以像 promises 一樣鏈接在一起。 當(dāng)您需要按特定順序執(zhí)行多個(gè)異步操作時(shí),這會(huì)很有用。
下面是一個(gè)鏈接異步函數(shù)的例子:
async function getData() {
const response = await fetch('https://api.example.com/data');
const data = await response.json();
return data;
}
async function processData(data) {
// do something with the data
return processedData;
}
async function displayData() {
const data = await getData();
const processedData = await processData(data);
console.log(processedData);
}
displayData();
在此示例中,我們有三個(gè)異步函數(shù):getData、processData 和 displayData。 displayData 函數(shù)調(diào)用getData 函數(shù)并等待其解析,然后再調(diào)用processData 函數(shù)并等待其解析。 然后將生成的處理數(shù)據(jù)記錄到控制臺(tái)。
Async/Await vs Promises
Async/await 建立在 promises 之上,它提供了一種更簡(jiǎn)潔、更簡(jiǎn)單的方法來(lái)編寫(xiě)使用 promises 的異步代碼。 但是,在某些情況下,您可能希望直接使用 promises 而不是 async/await。
直接使用 promises 的原因之一是,如果您需要使用 async/await 無(wú)法使用的 Promise API 功能。 例如,您可能希望使用 Promise.prototype.finally() 方法在承諾被解決或拒絕后執(zhí)行代碼,而不管結(jié)果如何。 這對(duì)于清理資源或記錄承諾的結(jié)果很有用。
下面是一個(gè)使用帶有承諾的 finally() 方法的例子:
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => {
// do something with the data
})
.catch(error => {
console.error(error);
})
.finally(() => {
console.log('request complete');
});
在此示例中,finally() 方法在 promise 被解決或被拒絕后被調(diào)用,并將一條消息記錄到控制臺(tái)。
直接使用 promises 的另一個(gè)原因是,如果您需要使用不支持 async/await 的舊版瀏覽器。 在這種情況下,您可以使用 polyfill 為舊版瀏覽器添加對(duì)異步/等待的支持。
結(jié)論
Async/await 是一種強(qiáng)大的語(yǔ)言特性,可以更輕松地編寫(xiě)和理解 JavaScript 中的異步代碼。 它建立在 promises 之上,提供了一種更簡(jiǎn)潔、更容易的方式來(lái)處理異步行為。 使用 async/await,您可以編寫(xiě)看起來(lái)和行為都像同步代碼的異步代碼,使其更易于閱讀和理解。