async 函数

async 函数是将 Generator 函数的 * 替换成 async，将 yield 替换成 await。async 表示函数里有异步操作，await 表示紧跟在后面的表达式需要等待结果，可以是 Promise 对象和原始类型的值（等于同步操作）。
async 函数的返回值是 Promise 对象，Generator 函数的返回值是 Iterator 对象，async 函数可以看做由多个异步操作包装成的Promise 对象， await 命令是内部 then命令的语法糖。

// 指定多少 ms 后 输出一个值
function timeout (ms) {
  return new Promise(resolve => {
    setTimeout(resolve, ms)
  })
}

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

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

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

async 函数返回的Promise 对象必须等到内部所有await 命令后面的 Promise 对象执行完才会发生状态改变，除非遇到 return 语句或抛出错误。

await 命令后面的Promise 对象可能是 rejected，最好把 await 命令放在 try...catch 代码块中

async function fun() {
  try {
    await someFunc()
  } catch (err) {
    console.log(err)
  }
}

await 命令后的异步操作如果不存在继发关系，最好让其同时触发

// 继发操作
let res1 = await f1()
let res2 = await f2()
// 并发操作
let fun1 = f1()
let fun2 = f2()
let res1 = await f1
let res2 = await f2
// 或
let [re1, res2] = new Promise.all([f1, f2])

async 函数的实现原理

将 generator 函数和自动执行器包装在一个函数里

async function fn(args) {
  // ...
}

function fn(args) {
  return spawn(function*(){
    // ...
  })
}

function spawn(generator) {
  return new Promise(function(resolve, reject) {
    var gen = generator()

    step(function() {
      return gen.next(undefined)
    })

    function step(nextF) {
      try {
        var next = nextF()
      } catch (e) {
        return reject(e)
      }
      if (next.done) {
        return resolve(next.value)
      }

      Promise.resolve(next.value).then(function(){
        step(function(v) {
          return gen.next(v)
        }, function(e) {
          return gen.throw(e)
        })
      })
    }
  })
}

DOM 元素上部署一系列动画，前一个动画结束再执行下一个，如果其中一个动画出错，就不再继续执行，返回上一个成功执行的动画的返回值。

function aniPromise(elem, animations) {
  var ret
  var p = Promise.resolve()

  for (var anim of animations) {
    p = p.then(function(val) {
      ret = val
      return anim(elem)
    })
  }

  return p.catch(function(e) {
    /* 忽略错误, 继续执行 */
  }).then (function() {
    return ret
  })
}

function aniGenerator(elem, animations) {
  return spawn(function* () {
    vat ret
    try {
      for (var anim of animations) {
        ret = yield anim(elem)
      }
    } catch(e) {
      /* 忽略错误, 继续执行 */
    }
     return ret
  }) 
}

async function aniAsync(elem, animations) {
  var ret
  try {
    for (var anim of animations) {
      ret = await anim(elem)
    }
  } catch (e) {
    /* 忽略错误, 继续执行 */
  }
  return ret
}