盘点JavaScript中async/await知识

Karen110 等级 851 1 0

大家好,我是进阶学习者。

一、前言

Async/await 是以更舒适的方式使用 promise 的一种特殊语法,同时它也非常易于理解和使用。

二、Async function

让以 async 这个关键字开始。它可以被放置在一个函数前面。

如下所示:


async function f() {
  return 1;
}

盘点JavaScript中async/await知识

在函数前面的 “async” 这个单词表达了一个简单的事情:即这个函数总是返回一个 promise。其他值将自动被包装在一个 resolved 的 promise 中。

例如,下面这个函数返回一个结果为 1 的 resolved promise。

让测试一下:


async function f() {
  return 1;
}
f().then(alert); // 1

也可以显式地返回一个 promise,结果是一样的:


async function f() {
  return Promise.resolve(1);
}
f().then(alert); // 1

盘点JavaScript中async/await知识

注:

async 确保了函数返回一个 promise,也会将非 promise 的值包装进去。很简单,对吧?但不仅仅这些。还有另外一个叫 await 的关键词,它只在 async 函数内工作,也非常酷。

三、Await

1. 语法


// 只在 async 函数内工作
let value = await promise;

关键字 await 让 JavaScript 引擎等待直到 promise 完成(settle)并返回结果。

这里的例就是一个 1 秒后 resolve 的 promise:


async function f() {
  let promise = new Promise((resolve, reject) => {
    setTimeout(() => resolve("done!"), 1000)
  });
  let result = await promise; // 等待,直到 promise resolve (*)
  alert(result); // "done!"
}
f();

盘点JavaScript中async/await知识

代码解析:

这个函数在执行的时候,“暂停”在了 (*) 那一行,并在 promise settle 时,拿到 result 作为结果继续往下执行。所以上面这段代码在一秒后显示 “done!”。

await 字面的意思就是让 JavaScript 引擎等待直到 promise settle,然后以 promise 的结果继续执行。这个行为不会耗费任何 CPU 资源,因为引擎可以同时处理其他任务:执行其他脚本,处理事件等。

相比于 promise.then,它只是获取 promise 的结果的一个更优雅的语法,同时也更易于读写。

不能在普通函数中使用 await。

如果尝试在非 async 函数中使用 await 的话,就会报语法错误:


function f() {
  let promise = Promise.resolve(1);
  let result = await promise; // Syntax error
}

盘点JavaScript中async/await知识

如果函数前面没有 async 关键字,就会得到一个语法错误。就像前面说的,await 只在 async 函数 中有效。

showAvatar() 例子,并将其改写成 async/await 的形式:

  1. 需要用 await 替换掉 .then 的调用。

  2. 另外,需要在函数前面加上 async 关键字,以使它们能工作。


async function showAvatar() {
  // 读取的 JSON
  let response = await fetch('/article/promise-chaining/user.json');
  let user = await response.json();
  // 读取 github 用户信息
  let githubResponse = await fetch(`https://api.github.com/users/${user.name}`);
  let githubUser = await githubResponse.json();
  // 显示头像
  let img = document.createElement('img');
  img.src = githubUser.avatar_url;
  img.className = "promise-avatar-example";
  document.body.append(img);
  // 等待 3 秒
  await new Promise((resolve, reject) => setTimeout(resolve, 3000));
  img.remove();
  return githubUser;
}
showAvatar();

简洁明了,是吧?比之前可强多了。await 不能在顶层代码运行。

这有一个用于演示的 Thenable 类

下面的 await 接受了该类的例子:

class Thenable {
  constructor(num) {
    this.num = num;
  }
  then(resolve, reject) {
    alert(resolve);
    // 1000ms 后使用 this.num*2 进行 resolve
    setTimeout(() => resolve(this.num * 2), 1000); // (*)
  }
};
async function f() {
  // 等待 1 秒,之后 result 变为 2
  let result = await new Thenable(1);
  alert(result);
}
f();

运行结果:

盘点JavaScript中async/await知识

注:

如果 await 接收了一个非 promise 的但是提供了 .then 方法的对象,它就会调用这个 .then 方法,并将内建的函数 resolve 和 reject 作为参数传入(就像它对待一个常规的 Promise executor 时一样)。

然后 await 等待直到这两个函数中的某个被调用(在上面这个例子中发生在 (*) 行),然后使用得到的结果继续执行后续任务。

2. Class 中的 async 方法

要声明一个 class 中的 async 方法,只需在对应方法前面加上 async 即可:


class Waiter {
  async wait() {
    return await Promise.resolve(1);
  }
}
new Waiter()
  .wait()
  .then(alert); // 1

运行结果:

盘点JavaScript中async/await知识

注:

它确保了方法的返回值是一个 promise 并且可以在方法中使用 await。

四、总结

本文基于JavaScript基础,介绍了async的使用。函数前面的关键字 async 有两个作用:让这个函数总是返回一个 promise。允许在该函数内使用 await。

这两个关键字一起提供了一个很好的用来编写异步代码的框架,这种代码易于阅读也易于编写。通过案例的分分析,图文结合的方式,进行详细的讲解,使用JavaScript语言,能够让读者更好的理解。

代码很简单,希望能够帮助你更好的学习。

**-----**------**-----**---**** End **-----**--------**-----**-****

往期精彩文章推荐:

盘点JavaScript中async/await知识

欢迎各位大佬点击链接加入群聊【helloworld开发者社区】:https://jq.qq.com/?_wv=1027&k=mBlk6nzX进群交流IT技术热点。

收藏
评论区

相关推荐

巨大提升!更快的 async 函数和 promises
(https://imghelloworld.osscnbeijing.aliyuncs.com/669a1c8f7203559afa4621628303674c.png) 翻译自:Faster async functions and promises(https://v8.dev/blog/fastasync) JavaScript
Python Sanic 高并发服务开发指南
技术基础 AsyncIO Python 3.4 开始引入 AsyncIO(https://docs.python.org/3/library/asyncio.html) 模块,使得 Python 也支持异步 IO。3.5 版本里添加了 async/await 关键字,使得异步 IO 代码编写更加方便。3.6 和 3.7 版本继续进行了完善
用 async/await 来处理异步
一级标题昨天看了一篇vue的教程,作者用async/ await来发送异步请求,从服务端获取数据,代码很简洁,同时async/await 已经被标准化,是时候学习一下了。先说一下async的用法,它作为一个关键字放到函数前面,用于表示函数是一个异步函数,因为async就是异步的意思, 异步函数也就意味着该函数的执行不会阻塞后面代码的执行。 写一个async
理解 Javascript 中的 Async / Await
在本文中,我们将探讨async/await,对于每个Javascript开发人员来说,是异步编程的首选工具。如果您不熟悉javascript,请不要担心,本文将帮助您async/await从头开始理解。 介绍async/await 是javascript中的一种模式,可使您的代码以同步方式执行,但又不影响javascript的异步行为。 定义异步功能要定义一
一次搞懂-JavaScript之异步编程
前言异步,就是非同步....这节内容可能会有点枯燥,但是却是 JavaScript 中非常重要的概念,非常有必要去学习。 目的 提升开发效率,编写易维护的代码 引子问题 请求时候为什么页面卡死??js$.ajax( url: "www.xx.com/api", async: false, // true success: function(result
从 生成器 到 promise+async
本文主要讲解js中关于生成器的相关概念和作用,以及到后面结合 promise 实现 es7中的 async 原理,你将学习到js中异步流程控制相关知识 1、认识生成器思考如下代码:javascript let x 1 function foo() x++ bar() console.log(x) // 3 function bar(
盘点JavaScript中async/await知识
大家好,我是进阶学习者。一、前言Async/await 是以更舒适的方式使用 promise 的一种特殊语法,同时它也非常易于理解和使用。 二、Async function让以 async 这个关键字开始。它可以被放置在一个函数前面。如下所示:async function f() return 1;在函数前面的 “async” 这个单词表达了一个简单的
Async详解之一:流程控制
地址:[https://github.com/caolan/async](https://www.oschina.net/action/GoToLink?url=https%3A%2F%2Fgithub.com%2Fcaolan%2Fasync) Async的内容分为三部分: 1. 流程控制:简化十种常见流程的处理 2. 集合处理:如何使用
C#异步编程 Task await的理解
async/await是C#5.0中推出的,先上用法: static void Main(string[] args) { Console.WriteLine("-------主线程启动-------"); Task<int> task = GetStrLengthAsync(); Conso
Javascript 中的神器——Promise
_摘要:_ 回调函数真正的问题在于他剥夺了我们使用 return 和 throw 这些关键字的能力。而 Promise 很好地解决了这一切 回调函数真正的问题在于他剥夺了我们使用 return 和 throw 这些关键字的能力。而 Promise 很好地解决了这一切 Promise概念 --------- 所谓 Promise,就是ES6原生提供的一个
Node.js的异步编程库async
#### 官方文档:[http://caolan.github.io/async/docs.html](https://www.oschina.net/action/GoToLink?url=http%3A%2F%2Fcaolan.github.io%2Fasync%2Fdocs.html) async包含了几个部分,Controlflow(异步流程处理)
Promise进一步阅读
下面是几篇比较好的Promise文章: \[1\] Promise是怎么工作的, [http://wengeezhang.com/?p=13](https://www.oschina.net/action/GoToLink?url=http%3A%2F%2Fwengeezhang.com%2F%3Fp%3D13) \[2\] JavaScript进阶之路
Python's Async and Await 异步
Python's Async and Await 异步 --------------------------- 展开 function \_typeof(e){ return e&&"undefined"!=typeof Symbol&&e.constructor===Symbol?"symbol":typeof e; } !function(e){ i
Spring中@Async
在[Java](https://www.oschina.net/action/GoToLink?url=http%3A%2F%2Flib.csdn.net%2Fbase%2Fjavase)应用中,绝大多数情况下都是通过同步的方式来实现交互处理的;但是在处理与第三方系统交互的时候,容易造成响应迟缓的情况,之前大部分都是使用多线程来完成此类任务,其实,在[spr
tornado+peewee
##### 前言: * 需要异步操作MySQL,又要用orm,使用sqlalchemy需要加celery,觉得比较麻烦,选择了peewee-async ##### 开发环境 python3.6.8+peewee-async0.5.12+peewee2.10.2 * 数据库:MySQL,使用peewee-async需要依赖库 pip instal