JavaScript中的Async和Await怎么用

2024-10-26 技术教程

小编给大家分享一下JavaScript中的Async和Await怎么用，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

什么是异步任务？

异步任务可让您在异步任务仍在努力完成时完成其他任务。

以下是一些日常异步任务示例示例 1：

您在驾车时订购食物，这会启动您的食物请求（异步任务）。

在准备食物的同时，您在得来速路线（下一个任务）中向前拉。

您不必等待食物准备好就可以前进。

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

示例 2：

你在厨房拖地。

当您等待厨房地板干燥时，您可以用吸尘器吸尘卧室的地毯。

最初的任务是清洁你的厨房地板，当地板干燥时，任务就完成了。

站在原地等待地板干燥的效率并不高，因此您在厨房地板干燥的同时用吸尘器吸尘卧室地板。

这也是 Javascript 处理异步函数的方式。

Async/Await 示例 – 烘烤冷冻比萨

您决定在烤箱中烤披萨，第一步是预热烤箱。

因此，您设置了所需的温度并开始预热烤箱。

当烤箱预热时，您将冷冻披萨从冰箱中取出，打开盒子，然后将其放在披萨盘上。

你还有时间！

也许在等待烤箱准备好时发出哔哔声的同时喝一杯饮料并看一些电视。

下面是一些代码来模拟这个例子：

//ThisasyncfunctionsimulatestheovenresponseconstovenReady=async()=>{returnnewPromise(resolve=>setTimeout(()=>{resolve('Beep!Ovenpreheated!')},3000));}//DefinepreheatOvenasyncfunctionconstpreheatOven=async()=>{console.log('Preheatingoven.');constresponse=awaitovenReady();console.log(response);}//DefinetheotherfunctionsconstgetFrozenPizza=()=>console.log('Gettingpizza.');constopenFrozenPizza=()=>console.log('Openingpizza.');constgetPizzaPan=()=>console.log('Gettingpan.');constplaceFrozenPizzaOnPan=()=>console.log('Puttingpizzaonpan.');constgrabABeverage=()=>console.log('Grabbingabeverage.');constwatchTV=()=>console.log('Watchingtelevision.');//NowcallthefunctionspreheatOven();getFrozenPizza();openFrozenPizza();getPizzaPan();placeFrozenPizzaOnPan();grabABeverage();watchTV();//Outputsequenceinconsole:Preheatingoven.Gettingpizza.Openingpizza.Gettingpan.Puttingpizzaonpan.Grabbingabeverage.Watchingtelevision.Beep!Ovenpreheated!

上述过程正是 async 和 await 的全部内容。

虽然我们await异步preheatOven功能齐全，我们可以执行类似任务同步getFrozenPizza，openFrozenPizza，getPizzaPan，placeFrozenPizzaOnPan，grabABeverage甚至watchTV。

我们一直在执行这样的异步任务

这也是Javascript 的ssync工作方式。

请注意，当我们await收到来自一个async函数的响应时，需要在另一个async函数中调用它。这就是当ovenReady调用preheatOven时我们在上面看到的。

要记住的两个关键点：

Javascript 不会等待async类似的函数preheatOven完成，然后才会继续执行类似getFrozenPizza和openFrozenPizza的任务。

Javascript 将await用于一个async函数，例如ovenReady在继续执行父异步函数内的下一个任务之前完成并返回数据。当console.log(response)语句ovenReady在返回响应之前不执行时，我们会看到这一点。

如果比萨饼的例子没有削减它......

我知道日常示例对我们中的一些人有帮助，但其他人可能更喜欢真正的代码。

因此，我将在下面提供一个不太抽象的异步和等待 JavaScript 示例，该示例使用 Fetch API 请求数据：

JavaScript 中的 Async/Await 代码示例

constgetTheData=async()=>{try{constresponse=awaitfetch('https://jsonplaceholder.typicode.com/users');if(!response.ok)throwError();constdata=awaitresponse.json();//dosomethingwiththisdata...savetodb,updatetheDOM,etc.console.log(data);console.log('Youwillseethislast.')}catch(err){console.error(err);}}getTheData();console.log('Youwillseethisfirst.');

以上是“JavaScript中的Async和Await怎么用”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注亿速云行业资讯频道！