JavaScript中的Async和Await怎么用

小編給大家分享一下JavaScript中的Async和Await怎么用，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

什么是異步任務？

異步任務可讓您在異步任務仍在努力完成時完成其他任務。

以下是一些日常異步任務示例

示例 1：

您在駕車時訂購食物，這會啟動您的食物請求（異步任務）。

在準備食物的同時，您在得來速路線（下一個任務）中向前拉。

您不必等待食物準備好就可以前進。

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

示例 2：

你在廚房拖地。

當您等待廚房地板干燥時，您可以用吸塵器吸塵臥室的地毯。

最初的任務是清潔你的廚房地板，當地板干燥時，任務就完成了。

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

這也是 Javascript 處理異步函數的方式。

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

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

因此，您設置了所需的溫度并開始預熱烤箱。

當烤箱預熱時，您將冷凍披薩從冰箱中取出，打開盒子，然后將其放在披薩盤上。

你還有時間！

也許在等待烤箱準備好時發出嗶嗶聲的同時喝一杯飲料并看一些電視。

下面是一些代碼來模擬這個例子：

// 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 的全部內容。

雖然我們await異步preheatOven功能齊全，我們可以執行類似任務同步getFrozenPizza，openFrozenPizza，getPizzaPan，placeFrozenPizzaOnPan，grabABeverage甚至watchTV。

我們一直在執行這樣的異步任務

這也是Javascript 的ssync工作方式。

請注意，當我們await收到來自一個async函數的響應時，需要在另一個async函數中調用它。這就是當ovenReady調用preheatOven時我們在上面看到的。

要記住的兩個關鍵點：

1. Javascript 不會等待async類似的函數preheatOven完成，然后才會繼續執行類似getFrozenPizza和openFrozenPizza的任務。

2. Javascript 將await用于一個async函數，例如ovenReady在繼續執行父異步函數內的下一個任務之前完成并返回數據。當console.log(response)語句ovenReady在返回響應之前不執行時，我們會看到這一點。

如果比薩餅的例子沒有削減它......

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

因此，我將在下面提供一個不太抽象的異步和等待 JavaScript 示例，該示例使用 Fetch API 請求數據：

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.');

以上是“JavaScript中的Async和Await怎么用”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！