ES6学习笔记21：async函数

含义

ES2017 标准引入 async 函数，使得一步操作变得更加方便

函数async对Generator 函数进行了改进，主要体现在以下方面

• 内置执行器

Generator 函数的执行必须要有执行器，而async函数自带执行器。async函数的执行，与普通函数一样，只要一行。

• 更好的语义

函数async和await比起*和yield,语义更加清楚。async表示函数里有异步操作，await表示其后的表达式需要更待结果。

• 更广的适用性

函数async函数的await后面，可以是Promise对象和原始类型的值（数值、字符串和布尔值但会自动转换为resolved 的Promise 对象）

• 返回值是Promise

函数async的返回值是Promise对象，比Generator函数返回的值是Iterator对象方便多了。可以直接使用then方法执行下一步动作

基本用法

函数async函数返回一个Promise对象，可以使用then方法添加回调函数。当函数执行的时候，一旦遇到await就会先返回，等待异步操作完成，再接着执行函数体内后面的语句。

例子：指定多少秒后输出一个值

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

async function asyncPrint(value, ms){
  await timeout(ms);
  console.log(value);
}

asyncPrint('hello async',1000);

由于 async函数返回的是Promise 对象，可以作为await命令的参数。所以，上面的代码也可以改写为：

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

async function asyncPrint(value, ms){
  await timeout(ms);
  console.log(value);
}

asyncPrint('hello async',1000);

函数async有多种使用方式

// 函数声明
async function abc() {}

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

// 对象的方法
let obj = { async abc (){}};

// 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 () => {};

语法

返回Promise 对象

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

async function f() {
  return 'hello async';
}

f().then(value=>console.log(value)); // 'hello async'

函数async函数内抛出错误，会导致返回的Promise 对象变为 reject状态。抛出的错误对象会被catch方法回调函数接收到。

async function f() {
  throw new Error('Error');
}

f().then(
  value => console.log(value),
  error => console.log(error),
)
// 'Error'

Promise对象的状态变化

函数async返回的Promise对象，必须要等到内部所有await命令后面的Promise对象完成才会发生状态改变，或者遇到return语句或者抛出错误。只有async函数内部的异步操作执行完，才会执行then方法指定的回调函数。

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