异步编程新方式async/await

一、前言

　　实际上对async/await并不是很陌生，早在阮大大的ES6教程里面就接触到了，但是一直处于理解并不熟练使用的状态，于是决定重新学习并且总结一下，写了这篇博文。如果文中有错误的地方还请各位批评指正！

二、介绍async/await

　　1.async/await 是异步代码的新方式

　　2.async/await 基于 Promise 实现

　　3.async/await使得异步代码更像同步代码

　　4.await 只能用在 async 函数中，不能用在普通函数中 await 关键字后面必须跟 Promise 对象 函数执行到 await 后，Promise 函数执行完毕，但因为 Promise 内部一般都是异步函数，所以事件循环会一直 等待，直到事件轮询检查到 Promise 有了状态 resolve 或 reject 才重新执行这个函数后面的内容

三、特点

　　async函数ES2017标准引入的语法，是Generator函数的语法糖，因此其相对于Generator函数，具有以下基本特点。

　　　内置执行器： 使用async函数可以像使用普通函数一样，直接调用即可执行。不用像Generator函数一样使用co模块来实现流程控制。

　　　语义化更强： async关键字表示是一个异步的函数，await表示需要等待执行。相对于yield表达式，语义化更强。

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

四、基本用法

　　1.async函数的返回值　

　　　　async函数返回一个 Promise 对象，async函数内部return语句返回的值，会成为then方法回调函数的参数。当函数执行的时候，一旦遇到await就会先返回，等到异步操作完成，再接着执行函数体内后面的语句。

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

f().then(v => console.log(v))
// "hello world"

　　　　上面代码中，函数f内部return命令返回的值，会被then方法回调函数接收到。

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

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

f().then(
  v => console.log('resolve', v),
  e => console.log('reject', e)
)
//reject Error: 出错了

　　2.Promise的状态变化

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

async function getTitle(url) {
  let response = await fetch(url);
  let html = await response.text();
  return html.match(/<title>([\s\S]+)<\/title>/i)[1];
}
getTitle('https://tc39.github.io/ecma262/').then(console.log)
// "ECMAScript 2017 Language Specification"

　　　　上面代码中，函数getTitle内部有三个操作：抓取网页、取出文本、匹配页面标题。只有这三个操作全部完成，才会执行then方法里面的console.log。

　　3.await命令

　　　　如果await命令后面是一个 Promise 对象，返回该对象的结果。如果不是 Promise 对象，就直接返回对应的值。

async function f() {
  // 等同于
  // return 123;
  return await 123;
}

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

　　　　如果await命令后面是一个thenable对象（即定义了then方法的对象），那么await会将其等同于 Promise 对象。

class Sleep {
  constructor(timeout) {
    this.timeout = timeout;
  }
  then(resolve, reject) {
    const startTime = Date.now();
    setTimeout(
      () => resolve(Date.now() - startTime),
      this.timeout
    );
  }
}

(async () => {
  const sleepTime = await new Sleep(1000);
  console.log(sleepTime);
})();
// 1000

　　　　如果await命令后面的 Promise 对象变为reject状态，则reject的参数会被catch方法的回调函数接收到。

async function f() {
  await Promise.reject('出错了');
}

f()
.then(v => console.log(v))
.catch(e => console.log(e))
// 出错了

　　　　任何一个await语句后面的 Promise 对象变为reject状态，那么整个async函数都会中断执行。

async function f() {
  await Promise.reject('出错了');
  await Promise.resolve('hello world'); // 不会执行
}

　　　　为了避免一些不必要的麻烦，建议把await放入try—catch中

async function myFunction() {
  try {
    await somethingThatReturnsAPromise();
  } catch (err) {
    console.log(err);
  }
}
// 另一种写法
async function myFunction() {
  await somethingThatReturnsAPromise()
  .catch(function (err) {
    console.log(err);
  });
}

　　4.总结

　　　　（1）async函数内部的异步操作执行完，根据其执行的状态，对应执行then或catch

　　　　（2）遇到await就会先返回，等到异步操作完成，再接着执行函数体内后面的语句。

　　　　（3）任何一个await语句后面的 Promise 对象变为reject状态，那么整个async函数都会中断执行。

五、实现原理

　　async 函数的实现原理，就是将 Generator 函数和自动执行器，包装在一个函数里。【Generator可以理解为一个状态机，内部封装了很多状态，同时返回一个迭代器Iterator对象。可以通过这个迭代器遍历相关的值及状态。 Generator的显著特点是可以多次返回，每次的返回值作为迭代器的一部分保存下来，可以被我们显式调用。】

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

// 等同于

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

　　所有的async函数都可以写成上面的第二种形式，其中的spawn函数就是自动执行器。下面给出spawn函数的实现

function spawn(genF) {
  return new Promise(function(resolve, reject) {
    const gen = genF();
    function step(nextF) {
      let next;
      try {
        next = nextF();
      } catch(e) {
        return reject(e);
      }
      if(next.done) {
        return resolve(next.value);
      }
      Promise.resolve(next.value).then(function(v) {
        step(function() { return gen.next(v); });
      }, function(e) {
        step(function() { return gen.throw(e); });
      });
    }
    step(function() { return gen.next(undefined); });
  });
}

六、注意事项

　　1.await只能使用在async函数内部，在普通函数中使用会报错

　　2.任何一个await语句后面的 Promise 对象变为reject状态，那么整个async函数都会中断执行。最好将其放入try—catch中

　　3.在某些场景下并不适合使用await，会增加页面交互时间，要合理利用

参考文档：https://es6.ruanyifeng.com/#docs/async

　　　　　http://www.vsoui.com/2018/06/07/async-await-function/

　　　　　https://blog.csdn.net/juhaotian/article/details/78934097