async await 深入简出

• async function 关键字可以用来定义一个异步函数表达式。

语法
async function [name]([param1[, param2[, ..., paramN]]]) {
  statements
}
参数
name
   函数名称。可以省略，以此来声明一个匿名的函数。也是用于本地调用函数体的一个名称。
paramN
   传入函数的参数名。
statements
   函数体内的语句声明。

简单的小例子

function resolveAfter2Seconds(x) {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve(x);
    }, 2000);
  });

};

var add1 = async function(x) {
  var a = resolveAfter2Seconds(20);
  var b = resolveAfter2Seconds(30);
  return x + await a + await b;
}

add1(10).then(v => {
  console.log(v);  // prints 60 after 2 seconds.
});

var add2 = async function(x) {
  var a = await resolveAfter2Seconds(20);
  var b = await resolveAfter2Seconds(30);
  return x + a + b;
};

add2(10).then(v => {
  console.log(v);  // prints 60 after 4 seconds.
});

• await
  await操作符被用于等待由一个async function
  返回的一个Promise
  。

语法

[*return_value*] = await *expression*;

表达式

一个 Promise
或者 任何等待解析的值。

返回值

返回 promise 的解析值，如果不是 promise，则返回值本身。

**await 表达式会造成异步函数停止执行并且等待 promise 的解决，当值被 resolved，异步函数会恢复执行以及返回 resolved 值。如果该值不是一个 promise，它将会被转换成一个 resolved 后的 promise。如果 promise 被 rejected，await 表达式会抛出异常值。

示例

1. 如果一个 Promise 被传递到一个 await 表达，它会等待 Promise 的解析并返回解析的的值。

function resolveAfter2Seconds(x) {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve(x);
    }, 2000);
  });
}

async function f1() {
  var x = await resolveAfter2Seconds(10);
  console.log(x); // 10
}
f1();

2.如果该值不是一个 Promise，它将该值转换为已解决的Promise，并等待它。

async function f2() {
  var y = await 20;
  console.log(y); // 20
}
f2();

3.如果 promise 被拒绝，则拒绝的值被抛出。

async function f3() {
  try {
    var z = await Promise.reject(30);
  } catch (e) {
    console.log(e); // 30
  }
}
f3();

浏览器兼容性

FireShot Screen Capture #015 - 'Can I use___ Support tables for HTML5, CSS3, etc' - caniuse_com_#search=async.png