Async 和 await 可能聽起來很復(fù)雜……但是一旦你深入了解它們，它們就像做披薩餅一樣簡單。我們在日常生活中無時不刻都在使用 “async” 和“ await”。
什么是異步任務(wù)？
異步任務(wù)可讓您在異步任務(wù)仍在努力完成時完成其他任務(wù)。
以下是一些日常異步任務(wù)示例
示例 1：
您在駕車時訂購食物，這會啟動您的食物請求（異步任務(wù)）。
在準(zhǔn)備食物的同時，您在得來速路線（下一個任務(wù)）中向前拉。
您不必等待食物準(zhǔn)備好就可以前進(jìn)。
您正在等待食物，您的要求在取貨窗口得到滿足。
示例 2：
你在廚房拖地。
當(dāng)您等待廚房地板干燥時，您可以用吸塵器吸塵臥室的地毯。
最初的任務(wù)是清潔你的廚房地板，當(dāng)?shù)匕甯稍飼r，任務(wù)就完成了。
站在原地等待地板干燥的效率并不高，因此您在廚房地板干燥的同時用吸塵器吸塵臥室地板。
這也是 Javascript 處理異步函數(shù)的方式。
Async/Await 示例 – 烘烤冷凍比薩
您決定在烤箱中烤披薩，第一步是預(yù)熱烤箱。
因此，您設(shè)置了所需的溫度并開始預(yù)熱烤箱。
當(dāng)烤箱預(yù)熱時，您將冷凍披薩從冰箱中取出，打開盒子，然后將其放在披薩盤上。
你還有時間！
也許在等待烤箱準(zhǔn)備好時發(fā)出嗶嗶聲的同時喝一杯飲料并看一些電視。
下面是一些代碼來模擬這個例子：
// This async function simulates the oven response
const ovenReady = async () => {
return new Promise(resolve => setTimeout(() => {
resolve('Beep! Oven preheated!')
}, 3000));
}
// Define preheatOven async function
const preheatOven = async () => {
console.log('Preheating oven.');
const response = await ovenReady();
console.log(response);
}
// Define the other functions
const getFrozenPizza = () => console.log('Getting pizza.');
const openFrozenPizza = () => console.log('Opening pizza.');
const getPizzaPan = () => console.log('Getting pan.');
const placeFrozenPizzaOnPan = () => console.log('Putting pizza on pan.');
const grabABeverage = () => console.log('Grabbing a beverage.');
const watchTV = () => console.log('Watching television.');
// Now call the functions
preheatOven();
getFrozenPizza();
openFrozenPizza();
getPizzaPan();
placeFrozenPizzaOnPan();
grabABeverage();
watchTV();
// Output sequence in console:
Preheating oven.
Getting pizza.
Opening pizza.
Getting pan.
Putting pizza on pan.
Grabbing a beverage.
Watching television.
Beep! Oven preheated!上述過程正是 async 和 await 的全部內(nèi)容。
雖然我們await異步?preheatOven?功能齊全，我們可以執(zhí)行類似任務(wù)同步?getFrozenPizza?，?openFrozenPizza?，?getPizzaPan?，?placeFrozenPizzaOnPan?，?grabABeverage?甚至watchTV。
我們一直在執(zhí)行這樣的異步任務(wù)
這也是Javascript 的ssync工作方式。
請注意，當(dāng)我們await收到來自一個async函數(shù)的響應(yīng)時，需要在另一個async函數(shù)中調(diào)用它。這就是當(dāng)ovenReady調(diào)用preheatOven時我們在上面看到的。
要記住的兩個關(guān)鍵點(diǎn)：
- Javascript 不會等待async類似的函數(shù)preheatOven完成，然后才會繼續(xù)執(zhí)行類似getFrozenPizza和openFrozenPizza的任務(wù)。
- Javascript 將await用于一個async函數(shù)，例如ovenReady在繼續(xù)執(zhí)行父異步函數(shù)內(nèi)的下一個任務(wù)之前完成并返回數(shù)據(jù)。當(dāng)console.log(response)語句ovenReady在返回響應(yīng)之前不執(zhí)行時，我們會看到這一點(diǎn)。
如果比薩餅的例子沒有削減它......
我知道日常示例對我們中的一些人有幫助，但其他人可能更喜歡真正的代碼。
因此，我將在下面提供一個不太抽象的異步和等待 JavaScript 示例，該示例使用 Fetch API 請求數(shù)據(jù)：
JavaScript 中的 Async/Await 代碼示例
const getTheData = async () => {
try {
const response = await fetch('https://jsonplaceholder.typicode.com/users');
if (!response.ok) throw Error();
const data = await response.json();
// do something with this data... save to db, update the DOM, etc.
console.log(data);
console.log('You will see this last.')
} catch (err) {
console.error(err);
}
}
getTheData();
console.log('You will see this first.');
結(jié)論
我希望我已經(jīng)幫助你理解 JavaScript 中的 async 和 await。
我知道要完全掌握可能需要一段時間。
開始為您想要的披薩預(yù)熱烤箱，并在等待嗶嗶聲的同時查看更多異步和等待示例！
