深入了解JavaScript async/await !

Async functions

让我们以 async 这个关键字开始。它可以被放置在任何函数前面,像下面这样:

async function f() {
  return 1;
}

在函数前面的「async」这个单词表达了一个简单的事情:即这个函数总是返回一个 promise。即使这个函数在语法上返回了一个非 promise 的值,加了「async」这个关键字就会指示 JavaScript 引擎自动将返回值包装成一个解析后的 promise。

例如,以下的代码就返回了一个以 1 为结果的解析后的 promise, 让我们试一下:

async function f() {
  return 1;
}

f().then(alert); // 1

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

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

f().then(alert); // 1

所以说,async 确保了函数的返回值是一个 promise,也会包装非 promise 的值。很简单是吧?但是还没完。还有一个关键字叫 await,它只在 async 函数中有效,也非常酷。

Await

语法如下:

// 只在 async 函数中有效
let value = await promise;

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

这里的例子就是一个 1 秒后解析的 promise:

async function f() {

  let promise = new Promise((resolve, reject) => {
    setTimeout(() => resolve("done!"), 1000)
  });

  let result = await promise; // 等待直到 promise 解析 (*)

  alert(result); // "done!"
}

f();

这个函数在执行的时候,「暂停」在了 (*) 那一行,并且当 promise 完成后,拿到 result 作为结果继续往下执行。所以「done!」是在一秒后显示的。

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

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

不能在普通函数中使用 await

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

function f() {
  let promise = Promise.resolve(1);
  let result = await promise; // 语法错误
}

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

让我们拿 Promises 链那一章的 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 不能在顶层代码运行

刚开始使用 await 的人常常会忘记 await 不能用在顶层代码中。如,下面这样就不行:

// syntax error in top-level code
let response = await fetch('/article/promise-chaining/user.json');
let user = await response.json();

我们可以将其包裹在一个匿名 async 函数中,如:

(async () => {
  let response = await fetch('/article/promise-chaining/user.json');
  let user = await response.json();
  ...
})();

await 可以接收「thenables」

promise.then 那样,await 被允许接收 thenable 对象(具有 then 方法的对象)。有些对象虽然不是 promise,但是却兼容 promise,如果这些对象支持 .then,那么就可以对它们使用 await

下面是一个 Thenable 类,await 接收了该类的实例:

class Thenable {
  constructor(num) {
    this.num = num;
  }
  then(resolve, reject) {
    alert(resolve);
    // resolve with this.num*2 after 1000ms
    setTimeout(() => resolve(this.num * 2), 1000); // (*)
  }
};

async function f() {
  // waits for 1 second, then result becomes 2
  let result = await new Thenable(1);
  alert(result);
}

f();

如果 await 接收了一个非 promise 的但是提供了 .then 方法的对象,它就会调用这个 then 方法,并将原生函数 resolvereject 作为参数传入。然后 await 等到这两个方法中的某个被调用(在例子中发生在(*)的那一行),再处理得到的结果。

Async methods

如果想定义一个 async 的类方法,在方法前面添加 async 就可以了:

class Waiter {
  async wait() {
    return await Promise.resolve(1);
  }
}

new Waiter()
  .wait()
  .then(alert); // 1

含义是相同的:它确保返回的值是Promise并启用await。

异常处理

如果一个 promise 正常解析,await promise 返回的就是其结果。但是如果 promise 被拒绝,就会抛出一个错误,就像在那一行有个 throw 语句那样。

这里的代码:

async function f() {
  await Promise.reject(new Error("Whoops!"));
}

...和下面是一样的:

async function f() {
  throw new Error("Whoops!");
}

在真实的环境下,promise 被拒绝前通常会等待一段时间。所以 await 会等待,然后抛出一个错误。

我们可以用 try...catch 来捕获上面的错误,就像对一般的 throw 语句那样:

async function f() {

  try {
    let response = await fetch('http://no-such-url');
  } catch(err) {
    alert(err); // TypeError: failed to fetch
  }
}

f();

如果有错误发生,代码就会跳到 catch 块中。当然也可以用 try 包裹多行 await 代码:

async function f() {

  try {
    let response = await fetch('/no-user-here');
    let user = await response.json();
  } catch(err) {
    // 捕获到 fetch 和 response.json 中的错误
    alert(err);
  }
}

f();

如果我们不使用 try...catch,由f() 产生的 promise 就会被拒绝。我们可以在函数调用后添加 .catch 来处理错误:

async function f() {
  let response = await fetch('http://no-such-url');
}

// f() 变为一个被拒绝的 promise
f().catch(alert); // TypeError: failed to fetch // (*)

如果我们忘了添加 .catch,我们就会得到一个未处理的 promise 错误(显示在控制台)。我们可以通过在错误处理与 Promise 章节讲的全局事件处理器来捕获这些。

async/awaitpromise.then/catch

当我们使用 async/await 时,几乎就不会用到 .then 了,因为为我们await 处理了异步等待。并且我们可以用 try...catch 来替代 .catch。这通常更加方便(当然不是绝对的)。

但是当我们在顶层代码,外面并没有任何 async 函数,我们在语法上就不能使用 await 了,所以这时候就可以用 .then/catch 来处理结果和异常。

就像上面代码的 (*) 那行一样。

async/await 可以和 Promise.all 一起使用

当我们需要同时等待多个 promise 时,我们可以用 Promise.all 来包裹他们,然后使用 await

// 等待多个 promise 结果let results = await Promise.all([
  fetch(url1),
  fetch(url2),
  ...
 ]);

如果发生错误,也会正常传递:先从失败的 promise 传到 Promise.all,然后变成我们能用 try...catch 处理的异常。

Microtask queue

我们在微任务和事件循环章节讲过,promise 回调是异步执行的。每个 .then/catch/finally 回调首先被放入「微任务队列」然后在当前代码执行完成后被执行。

Async/await 是基于 promise 的,所以它内部使用相同的微任务队列,并且相对宏任务来说具有更高的优先级。

例如,看代码:

  • setTimeout(handler, 0),应该以零延迟运行 handler 函数。
  • let x = await f(),函数 f() 是异步的,但是会立即运行。

那么如果 awaitsetTimeout 下面,哪一个先执行呢?

async function f() {
  return 1;
}

(async () => {
    setTimeout(() => alert('timeout'), 0);

    await f();

    alert('await');
})();

这里很确定:await 总是先完成,因为(作为微任务)它相比 setTimeout 具有更高的优先级。

总结

函数前面的关键字 async 有两个作用:

  1. 让这个函数返回一个 promise
  2. 允许在函数内部使用 await

这个 await 关键字又让 JavaScript 引擎等待直到 promise 完成,然后:

  1. 如果有错误,就会抛出异常,就像那里有一个 throw error 语句一样。
  2. 否则,就返回结果,并赋值。

这两个关键字一起用就提供了一个很棒的方式来控制异步代码,并且易于读写。

有了 async/await 我们就几乎不需要使用 promise.then/catch,但是不要忘了它们是基于 promise 的,所以在有些时候(如在最外层代码)我们就可以用 promise 的形式。再有就是 Promise.all 可以帮助我们同时处理多个异步任务。

英文原文地址:https://javascript.info/async-await

Image placeholder
前端答疑
未设置
  88人点赞

没有讨论,发表一下自己的看法吧

推荐文章
CentOS7 下使用 rsync+sersync 配置文件自动同步

为什么需要文件自动同步功能? 我们平时上传代码,可以通过ftp、sftp等将文件上传至服务器,耗时耗力,而且很容易出错。如果服务器数量少还好,一但服务器数量增加,压力可想而知。 这个时候我们可以使用各

Rust 标准库中的 async/await (async-std)

Rust对齐标准库中的async/await(async-std)简介现在的rust生态中,async/await在rust1.39中已经stable,其他库还有futures已经到0.3.x,还有就

来福州,深入了解华为的“数字平台”

   数字化转型已成为几乎所有企业的必经之路,然而在相关战略的制定与真正落地的过程中,企业总是不可避免地会遇到一些困惑与挑战。  企业数字化转型的挑战——尤其对于许多传统行业的企业而言,主要体现在:A

深入了解Nodejs Buffer的使用

JavaScript起初为浏览器而设计,没有读取或操作二进制数据流的机制。Buffer类的引入,则让NodeJS拥有操作文件流或网络二进制流的能力。Buffer基本概念Buffer对象的内存分配不是在

深入理解JVM - 内存溢出实战

Java堆溢出Java堆用于存储对象实例,只要不断地创建对象,当对象数量到达最大堆的容量限制后就会产生内存溢出异常。最常见的内存溢出就是存在大的容器,而没法回收,比如:Map,List等。出现下面信息

可视化的JavaScript:JavaScript引擎运行原理

JavaScript很酷,但是JavaScript引擎是如何才能理解我们编写的代码呢?作为JavaScript开发人员,我们通常不需要自己处理编译器。然而,了解JavaScript引擎的基础知识并了解

一些JavaScript 类(class)中需要了解的知识

JavaScript使用原型继承:每个对象都从原型对象继承属性和方法。在Java或Swift等语言中使用的传统类作为创建对象的蓝图,在JavaScript中不存在,原型继承仅处理对象。原型继承可以模拟

【THE LAST TIME】深入浅出 JavaScript 模块化

前言Thelasttime,Ihavelearned【THELASTTIME】一直是我想写的一个系列,旨在厚积薄发,重温前端。也是对自己的查缺补漏和技术分享。欢迎大家多多评论指点吐槽。系列文章均首发于

Linux 文件同步工具之 rsync

学习背景 1.最近公司的项目在使用jenkins做自动化构建,因为jenkins在构建时是比较耗性能的,便单独使用了一台服务器做构建服务器。但是个人觉得这样成本过高,单独拿一台服务器来构建并且该服务器

利用 consul+nginx-upsync 实现动态负载

如果Nginx遇到大流量和高负载,修改配置文件重启可能并不总是那么方便,因为恢复Nginx并重载配置会进一步增加系统负载,并很可能暂时降低性能。而一个个修改配置文件也是很容易出错和费时间的操作。 这时

利用 consul+nginx-upsync 实现动态负载

这是前一段时间学习的课程上面的,自己实际操作了一下,详细操作及说明如下。如果Nginx遇到大流量和高负载,修改配置文件重启可能并不总是那么方便,因为恢复Nginx并重载配置会进一步增加系统负载,并很可

死磕Synchronized底层实现,面试你还怕什么?

关于 synchronized 的底层实现,网上有很多文章了。但是很多文章要么作者根本没看代码,仅仅是根据网上其他文章总结、照搬而成,难免有些错误;要么很多点都是一笔带过,对于为什么这样实现没有一个说

ES6问答-async函数

async函数 async是什么?它和Genernator函数外观上的区别是什么? constasyncReadFile=asyncfunction(){ constf1=awaitreadFile

Onvif/RTSP海康大华网络安防摄像机网页无插件直播方案EasyNVR中直播页面和视频列表页面的区别介绍

背景分析随着平安城市、智慧城市、雪亮工程、智能交通等各项建设的持续开展,安防逐渐得到普及,面对如此广阔的市场,对安防企业来说不仅仅是机遇更多的是挑战。现今大多数摄像头一直没能摆脱人工监控的传统监控方式

Onvif/RTSP海康大华网络安防摄像机网页无插件直播方案EasyNVR如何使用Excel将通道配置简单化?

进入移动互联网时代以来,企业微信公众号已成为除官网以外非常重要的宣传渠道,当3.2亿直播用户与9亿微信用户的势能累加,在微信上开启直播已成为越来越多企业的必然选择。EasyNVR核心在于摄像机的音视频

Onvif/RTSP海康大华网络安防摄像机网页无插件直播方案EasyNVR登陆用户名密码失效问题解决方案

背景分析随着互联网基础设施建设的发展,4G/5G/NB-IoT各种网络技术的大规模商用,视频随时随地可看、可控的诉求越来越多,互联网思维、架构和技术引入进传统监控行业里,成为新形势下全终端监控的基础需

RTSP、RTMP网络摄像头互联网无插件直播视频流媒体服务器EasyNVR在windows上无法启动问题排查

背景需求随着雪亮工程、明厨亮灶、手机看店、智慧幼儿园监控等行业开始将传统的安防摄像头进行互联网、微信直播,我们知道摄像头直播的春天了。将安防摄像头或NVR上的视频流转成互联网直播常用的RTSP、RTM

安防摄像头网页无插件直播流媒体服务器EasyNVR在IE浏览器下的 pointer-events- none前端兼容性调试

背景说明由于互联网的飞速发展,传统安防摄像头的视频监控直播与互联网直播相结合是大势所趋。传统安防的直播大多在一个局域网内,在播放的客户端上也是有所限制,一般都需要OCXWeb插件进行直播。对于安防监控

RTSP-ONVIF协议安防视频监控流媒体服务解决方案EasyNVR在Windows重启时提示“进程意外终止”问题解析

什么是ONVIFOpenNetworkVideoInterfaceForum,开放型网络视频接口论坛,以公开、开放的原则共同制定开放性行业标准。是一个提供开放网络视频接口的论坛组织。ONVIF规范描述

安防摄像头RTSP/Onvif协议网页无插件直播视频流媒体服务器EasyNVR之按需直播如何有效利用最大上行带宽

介绍一般情况下,直播默认的播放方式是非按需直播,但很多情况下,不少用户会选择按需直播。按需直播能够减少带宽流量和服务器性能占用,最优的提高服务器的使用效率。下面我们来系统介绍下EasyNVR中按需直播

RTSP网络摄像头/海康大华硬盘录像机网页无插件直播方案EasyNVR如何实现RTMP/FLV/HLS/RTSP直播流分发

背景需求对于摄像机直播,客户反馈的最多就是实现web直播、摆脱插件,可以自定义集成等问题。我们熟悉的EasyNVR已经完美的解决了这些问题。然而对于web播放也存在一些问题,通常我们web播放RTMP

喊话 JavaScript 开发者:玩 DOM 也要专业范儿

别再害怕DOM了,让我们充分挖掘DOM的潜力,你会真的爱上它。 2008年,当我刚成为一名专业Web开发人员参加工作时,我了解一些HTML、CSS和PHP的知识。那时我也在学习JavaScript

JavaScript 的数据结构和算法

现在有个还不是好的项目,未来会成为好的项目的项目想介绍给大家。传送门https://github.com/MasterShu/JavaScript-Da...这个是本人在维护的一个项目。主要是使用Ja

JavaScript 安全知识: CORS 简明教程

概述浏览器会强制同源策略以禁止不同源的网站获得响应; 『同源策略』不会阻止对其他来源的请求,但是会禁用JavaScript对响应内容的读取。 -CORS标头允许访问跨域响应。 -CORS与凭证一起需要

一起来学 TypeScript

鉴于JavaScript社区正式更名为F2E前端,我就大胆的把我另外一个项目也放上来。😄这个项目是关于TypeScript,是个人记录TypeScript的学习历程以及各个常用库的TypeScript