ES6—async函数

含义

Generator函数的语法糖

// *替换成async，yield替换成await
var asyncReadFile = async function () {
	var f1 = await readFile('/etc/fstab');
	var f2 = await readFile('/etc/shells');
	console.log(f1.toString());
}

async函数对Generator函数的改进在以下四点：

1. 内置执行器
   async指代执行器
2. 更好的语义
3. 更广的适用性
   co模块约定yield命令后面只能是Thunk函数或Promise对象，async函数的await命令后面可以是其他原始类型的值（但等同于同步操作）
4. 返回值是Promise
   async函数的返回值是Promise对象

用法

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

async有多种使用形式：

// 函数声明
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 () => {};

语法

返回Promise对象

1. 返回值成为then方法回调函数的参数
2. async函数内部抛出错误会导致返回的Promise对象变为reject状态。抛出的错误对象会被catch方法回调函数接收到

Promise对象的状态变化

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

await命令

await命令后面的是一个Promise对象，如果不是就会被转成一个立即resolve的Promise对象

async function f() {
	return await 123;  // 被转换成Promise对象并立即resolve
}

f().then(v => console.log(v))  // 123

错误处理

如果await后面的异步操作出错，那么等同于async函数返回的Promise对象被reject，解决方法是将其放在try…catch中

async function f() {
  try {
    await new Promise(function (resolve, reject) {
      throw new Error('this is a error')
    })
  } catch (error) {
    console.log('-------------------------------------')
  }
  return await 'hello world'
}

使用注意点

1. await命令后面的Promise对象的运行结果可能是rejected，故将await语句放在try…catch代码块中
2. 多个await命令后面的异步操作如果不存在继发关系，最好让他们同时触发
3. await命令只能用在async函数中，用在普通函数中会报错

async函数的实现原理

实现原理是将Generator函数和自动执行器包装在一个函数里

/**
* spawn函数是自动执行器
**/
async function fn(args) {
	// ...
}
// 等同于
function fn(args) {
	return spawn(function* () {
		// ...
	})
}

其他异步处理方法的比较（一系列动画为例）

Promise

/**
 * 播放系列动画
 */
// Promise
function chainAnimationsPromise(elem, animations) {

  // 变量ret用来保存上一个动画的返回值
  var ret = null

  // 新建一个空的Promise
  var p = Promise.resolve()

  // 使用then方法，添加所有动画
  for (const anim of animations) {
    p = p.then((val) => {
      ret = val
      return anim(elem)
    })
  }

  // 返回一个部署了错误捕捉机制的Promise
  return p
    .catch(function (e) {})
    .then(function () {
      return ret
    })
}

Generator

// Generator
function chainAnimationsGenerator(elem, animations) {
  return spawn(function* () {
    var ret = null
    try {
      for (const anim of animations) {
        ret = yield anim(elem)
      }
    } catch (error) {
      /* 忽略错误，继续执行 */
    }
    return ret
  })
}

async

// async
async function chainAnimationsAsync(elem, animations) {
  var ret = null
  try {
    for (const anim of animations) {
      ret = await anim(elem)
    }
  } catch (error) {}
  return ret
}

遍历器接口