JavaScript 中的 Async 和 Await 介绍

2021-08-31 09:54:05 浏览数 (1)

Async 和 await 可能听起来很复杂……但是一旦你深入了解它们，它们就像做披萨饼一样简单。我们在日常生活中无时不刻都在使用 “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。

我知道要完全掌握可能需要一段时间。

开始为您想要的披萨预热烤箱，并在等待哔哔声的同时查看更多异步和等待示例！


JavaScript

0 人点赞