JavaScript 异步操作进阶第三步：async 函数

一、含义

在早期，ES6 最初的异步处理方案引入 Promise 对象，后经过升级成更好的异步编程解决方案：Generator 函数。
但是，Generator 函数是不能自动执行的，返回的是一个遍历器对象。需要借助 Thunk 函数或者 co 模块实现自动流程管理。
为了使得异步操作变得更加合理，ES2017标准引入了 async 函数。相较于 Generator 函数，async 函数有一下几点优势：
1. 内置执行器
async 函数自带执行器，不需要像 Generator 函数需要 co 模块实现自动流程管理。像调用普通函数一样：asyncReadFile() ，只要一行，Generator 函数需要调用 next 方法或者借助 co 模块才能得到最终结果。

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

3. 更广的适用性
co 模块约定，yield 命令后面只能是 Thunk 函数 或 Promise对象，而 async 函数的 await 命令后面，可以是 Promise 对象和原始类型的值（数值、字符串、布尔值，但这时等同于同步操作）。

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

通俗讲，async 函数是 Generator 函数的语法糖，是由多个异步操作包装成的一个 Promise 对象，而 await 命令就是内部 then 命令的语法糖。

二、用法

1、多种使用形式

// 函数声明
async function foo() {};

// 函数表达式
const = foo = async function() {};

// 对象的方法
let obj = { async foo() {} };
obj.foo().then(...);

// calss 的方法
class Storage {
  constructor() {
    this.cachePromise = caches.open('yuan');
  }

  async getYuan(name) {
    const cache = await this.cachePromise;
    return cache.match(`/yuan/${ name } .png`);
  }
}

const storage = new Storage();
storage.getYuan('monkey').then(...);

// 箭头函数
const foo = async () => {};

2、返回 Promise 对象

async 函数内部 return 语句返回的值，会成为 then 方法回调函数的参数

async function f() {
  return "hello world";
}
f().then(v => console.log(v)); // hello world

3、Promise 对象的状态变化

只有 async 函数内部的 await 命令执行完，才会执行 then 方法指定的回调函数：

async function getTitle(url) {
  let response = await fetch(url);
  let  html = response.text(0;
  return html..match(/