ES6 async函数（对比generator函数（内置执行器、语义、适用性、返回）、使用形式、用法（返回对象及状态变化）、await命令、错误处理、使用注意点、顶层await）

目录

async函数

对比generator函数

内置执行器。

更好的语义。

更广的适用性。

返回值是 Promise。

使用形式

用法

基础用法

 返回 Promise 对象

Promise 对象的状态变化

await 命令

错误处理 

 使用注意点

顶层await

​Generator函数介绍

---

async函数

async 函数是Generator 函数的语法糖。它将Generator 函数的星号（*）替换成async，将yield替换成await。

对比generator函数

async函数完全可以看作多个异步操作，包装成的一个 Promise 对象，而await命令就是内部then命令的语法糖。

内置执行器。

Generator 函数的执行必须靠执行器，所以才有了co模块，而async函数自带执行器。也就是说，async函数的执行，与普通函数一模一样，只要一行。

更好的语义。

async和await，比起星号和yield，语义更清楚了。async表示函数里有异步操作，await表示紧跟在后面的表达式需要等待结果。

更广的适用性。

co模块约定，yield命令后面只能是 Thunk 函数或 Promise 对象，而async函数的await命令后面，可以是 Promise 对象和原始类型的值（数值、字符串和布尔值，但这时会自动转成立即 resolved 的 Promise 对象）。

返回值是 Promise。

async函数的返回值是 Promise 对象，这比 Generator 函数的返回值是 Iterator 对象方便多了。你可以用then方法指定下一步的操作。

使用形式

// 函数声明
async function foo() {}
// 函数表达式
const foo = async function () {};
// 对象的方法
let obj = { async foo() {} };
obj.foo().then(...)

// Class 的方法
class Storage {
  constructor() {
    this.cachePromise = caches.open('avatars');
  }
  async getAvatar(name) {
    const cache = await this.cachePromise;
    return cache.match(`/avatars/${name}.jpg`);
  }
}
const storage = new Storage();
storage.getAvatar('jake').then(…);
// 箭头函数
const foo = async () => {};

用法

注意await后面后面只有接Promise时才会等待Promise对象到fulfilled状态（即内部执行了resolve函数）才会往下执行，如果不是Promise对象，执行顺序和普通函数无差别。

基础用法

下面代码指定 50 毫秒以后，输出hello world。

function timeout(ms) {
  return new Promise((resolve) => {
    setTimeout(resolve, ms);
  });
}
async function asyncPrint(value, ms) {