Async 和 await 可能聽(tīng)起來(lái)很復(fù)雜……但是一旦你深入了解它們，它們就像做披薩餅一樣簡(jiǎn)單。我們?cè)谌粘Ｉ钪袩o(wú)時(shí)不刻都在使用 “async” 和“ await”。

什么是異步任務(wù)？

異步任務(wù)可讓您在異步任務(wù)仍在努力完成時(shí)完成其他任務(wù)。

以下是一些日常異步任務(wù)示例

示例 1：

您在駕車(chē)時(shí)訂購(gòu)食物，這會(huì)啟動(dòng)您的食物請(qǐng)求（異步任務(wù)）。

在準(zhǔn)備食物的同時(shí)，您在得來(lái)速路線(xiàn)（下一個(gè)任務(wù)）中向前拉。

您不必等待食物準(zhǔn)備好就可以前進(jìn)。

您正在等待食物，您的要求在取貨窗口得到滿(mǎn)足。

示例 2：

你在廚房拖地。

當(dāng)您等待廚房地板干燥時(shí)，您可以用吸塵器吸塵臥室的地毯。

最初的任務(wù)是清潔你的廚房地板，當(dāng)?shù)匕甯稍飼r(shí)，任務(wù)就完成了。

站在原地等待地板干燥的效率并不高，因此您在廚房地板干燥的同時(shí)用吸塵器吸塵臥室地板。

這也是 Javascript 處理異步函數(shù)的方式。

Async/Await 示例 – 烘烤冷凍比薩

您決定在烤箱中烤披薩，第一步是預(yù)熱烤箱。

因此，您設(shè)置了所需的溫度并開(kāi)始預(yù)熱烤箱。

當(dāng)烤箱預(yù)熱時(shí)，您將冷凍披薩從冰箱中取出，打開(kāi)盒子，然后將其放在披薩盤(pán)上。

你還有時(shí)間！

也許在等待烤箱準(zhǔn)備好時(shí)發(fā)出嗶嗶聲的同時(shí)喝一杯飲料并看一些電視。

下面是一些代碼來(lái)模擬這個(gè)例子：

// 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!

上述過(guò)程正是 async 和 await 的全部?jī)?nèi)容。

雖然我們await異步?preheatOven?功能齊全，我們可以執(zhí)行類(lèi)似任務(wù)同步?getFrozenPizza?，?openFrozenPizza?，?getPizzaPan?，?placeFrozenPizzaOnPan?，?grabABeverage?甚至watchTV。

我們一直在執(zhí)行這樣的異步任務(wù)

這也是Javascript 的ssync工作方式。

請(qǐng)注意，當(dāng)我們await收到來(lái)自一個(gè)async函數(shù)的響應(yīng)時(shí)，需要在另一個(gè)async函數(shù)中調(diào)用它。這就是當(dāng)ovenReady調(diào)用preheatOven時(shí)我們?cè)谏厦婵吹降摹?/p>

要記住的兩個(gè)關(guān)鍵點(diǎn)：

1. Javascript 不會(huì)等待async類(lèi)似的函數(shù)preheatOven完成，然后才會(huì)繼續(xù)執(zhí)行類(lèi)似getFrozenPizza和openFrozenPizza的任務(wù)。
2. Javascript 將await用于一個(gè)async函數(shù)，例如ovenReady在繼續(xù)執(zhí)行父異步函數(shù)內(nèi)的下一個(gè)任務(wù)之前完成并返回?cái)?shù)據(jù)。當(dāng)console.log(response)語(yǔ)句ovenReady在返回響應(yīng)之前不執(zhí)行時(shí)，我們會(huì)看到這一點(diǎn)。

如果比薩餅的例子沒(méi)有削減它......

我知道日常示例對(duì)我們中的一些人有幫助，但其他人可能更喜歡真正的代碼。

因此，我將在下面提供一個(gè)不太抽象的異步和等待 JavaScript 示例，該示例使用 Fetch API 請(qǐng)求數(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。

我知道要完全掌握可能需要一段時(shí)間。

開(kāi)始為您想要的披薩預(yù)熱烤箱，并在等待嗶嗶聲的同時(shí)查看更多異步和等待示例！