耀极客论坛

 找回密码
 立即注册
查看: 504|回复: 0

JS中的async与await怎么使用

[复制链接]

193

主题

176

帖子

276

积分

中级会员

Rank: 3Rank: 3

积分
276
发表于 2022-5-7 00:56:34 | 显示全部楼层 |阅读模式
  这篇文章主要介绍了JS的async/await怎么使用,简单来说,async/await是基于promises的语法糖,使异步代码更易于编写和阅读,下面来看详细的介绍内容吧。需要的小伙伴也可以参考一下

一、async

  async创建一个异步函数来定义一个代码块,在其中运行异步代码;
  怎样变成异步函数呢?以 async 这个关键字开始,它可以被放置在一个函数前面
  1. async function f() {
  2.   return 1;
  3. }
  4. f().then(alert); // 1
  5. //上下结果一样
  6. async function f() {
  7.   return Promise.resolve(1);
  8. }
  9. f().then(alert); // 1
  10. //也可以用箭头函数
  11. let hello = async () => { return "1" };
  12. hello().then((value) => console.log(value))
  13. //返回值也可以简化成这样
  14. hello().then(console.log)
复制代码
  异步函数的特征之一:保证函数的返回值为 promise。
  将 async 关键字加到函数申明中,可以告诉它们返回的是 promise,而不是直接返回值。此外,它避免了同步函数为支持使用 await 带来的任何潜在开销。

二、await:

  await 只在异步函数里面才起作用。它可以放在任何异步的,关键字 await 让 JavaScript 引擎等待直到 promise 完成并返回结果。在等待promise的同时,其他正在等待执行的代码就有机会执行了。
  您可以在调用任何返回Promise的函数时使用 await,包括Web API函数。
  1. async function f() {
  2.   let promise = new Promise((resolve, reject) => {
  3.     setTimeout(() => resolve("咚!"), 1000)
  4.   });
  5.   let result = await promise; // 等待执行,直到 promise resolve 执行完
  6.   alert(result); // "咚!"
  7. }
  8. f();//拿到 result 作为结果继续往下执行。所以上面这段代码在1秒后显示 “咚!”。
复制代码
  1. 注意:await 实际上会暂停函数的执行,直到 promise 状态变为 完成,然后以 promise 的结果继续执行。这个行为不会耗费任何 CPU 资源,因为 JavaScript 引擎可以同时处理其他任务:执行其他脚本,处理事件等。
复制代码
三、综合应用

  有了async/await就去除了到处都是 .then() 代码块,因为await会等待了。
  1. async function A() {
  2.   let response = await fetch('c.jpg');
  3.   let myBlob = await response.blob();
  4.   let objectURL = URL.createObjectURL(myBlob);
  5.   let image = document.createElement('img');
  6.   image.src = objectURL;
  7.   document.body.appendChild(image);
  8. }
  9. A()
  10. .catch(e => {
  11.   console.log('问题: ' + e.message);
  12. });
复制代码
  用更少的.then()块来封装代码,同时它看起来很像同步代码,所以它非常直观。这样用的很爽!
  到此这篇关于JS的async/await怎么使用的文章就介绍到这了,更多相关JS的async/await 用法内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!


回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|耀极客论坛 ( 粤ICP备2022052845号-2 )|网站地图

GMT+8, 2022-12-7 12:22 , Processed in 0.073900 second(s), 20 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表