JavaScript异步编程：（五）async与await

前言

上文讲了Promise，它在回调函数的基础上，优化了回调的结构，链式结构让多个异步任务的调用更加方便，但是多个异步任务之间的参数有依赖的时候，就会显得复杂；
例如：计算三个任务的结果值的和

• 使用Promise实现

taskOne() {
  return new Promise((resolve) => {
    setInterval(() => {
      resolve(4);
    }, 3000);
  });
},

taskTwo() {
  return new Promise((resolve) => {
    setInterval(() => {
      resolve(2);
    }, 1000);
  });
},

taskThree() {
  return new Promise((resolve) => {
    setInterval(() => {
      resolve(5);
    }, 3000);
  });
},
var valueOne = 0;
var valueTwo = 0;
var valueThree = 0;
this.taskOne().then((value) => {
  valueOne = value;
  return this.taskTwo()
}).then((value) => {
  valueTwo = value;
  return this.taskThree()
}).then((value) => {
  valueThree = value;
  let result = valueOne + valueTwo + valueThree
  console.log(result, 'result');
})

使用Promise调用，需要需要把每个task的值保存，在最后一个then中计算，但是阅读起来不够顺畅；

await与async能帮我们更优雅的实现这一个功能；

async task() {
  let valueOne = await this.taskOne();
  let valueTwo = await this.taskTwo();
  let valueThree = await this.taskThree();
  let result = valueOne + valueTwo + valueThree;
  console.log(result, 'result')
},

// 调用task方法
this.task();

一、async

async是一个关键字，用来在表达式中定义异步函数。

async function [name]([param1[, param2[, ..., paramN]]]) { statements }

使用async关键字定义的函数，标识这个函数是一个异步函数，需要在异步线程中执行。

async taskOne() {
  return 'aaa';
},
this.taskOne().then((value) => {
  console.log(value, 'result');
})

async 函数返回的是一个 Promise 对象。
如果在函数中 return 一个直接量，async 会把这个直接量通过 Promise.resolve() 封装成 Promise 对象。

二、await

await 操作符用于等待一个Promise对象。它只能在异步函数async func中使用。

await = async wait；表示等待一个异步任务；

async task() {
  let valueOne = await this.taskTwo();
  console.log(valueOne);
},

taskTwo() {
  return new Promise((resolve) => {
    setInterval(() => {
      resolve(2);
    }, 1000);
  });
},

async func返回的是一个Promise对象，await当然也可以等待一个async func。
await的运行流程：

• await 表达式会暂停当前方法的执行，等待 Promise 处理完成
• 若 Promise 正常处理(fulfilled)，其回调的resolve函数参数作为 await 表达式的值，继续执行往下当前方法。
• 若 Promise 处理异常(rejected)，await 表达式会把 Promise 的异常原因抛出。
• 果 await 操作符后的表达式的值不是一个 Promise，则返回该值本身。

await会暂停当前方法的执行，所以await只能在异步函数(async func)中使用。
await描述的Promise处理异常的时候，会把异常抛出，所以我们需要使用try catch监测该异常；

async task() {
  try {
    let valueOne = await this.taskTwo();
    console.log(valueOne);
  } catch(e) {
    console.log(e, 'error');
  }
},