async函数，了解一下

今天，带你们来谈谈ES6中的async函数，咱们在理解一个概念的时候，无外乎这是三个方面

• 是什么
• 为何
• 怎么用

若是感受文章太长，能够直接拉到下面，看小结🙄

sync是什么

ES7提供了async函数，使得异步操做变得更加方便。async函数是什么？一句话，async函数就是Generator函数的语法糖。

咱们来个案例，取读文件

Generator函数

var fs = require('fs');

var readFile = function (fileName) {
  return new Promise(function (resolve, reject) {
    fs.readFile(fileName, function(error, data) {
      if (error) reject(error);
      resolve(data);
    });
  });
};

var gen = function* (){
  var f1 = yield readFile('/etc/fstab');
  var f2 = yield readFile('/etc/shells');
  console.log(f1.toString());
  console.log(f2.toString());
};
复制代码

写成async函数，就是下面这样。

var asyncReadFile = async function (){
  var f1 = await readFile('/etc/fstab');
  var f2 = await readFile('/etc/shells');
  console.log(f1.toString());
  console.log(f2.toString());
};
复制代码

一比较就会发现，async函数就是将Generator函数的星号（*）替换成async，将yield替换成await，仅此而已。

咱们会想，为何明明有Generator函数，还须要async函数

为何须要async函数

async函数对 Generator 函数的改进，体如今如下四点。

（1）内置执行器。Generator函数的执行必须靠执行器，因此才有了co模块，而async函数自带执行器。也就是说，async函数的执行，与普通函数如出一辙，只要一行。

var result = asyncReadFile();
复制代码

上面的代码调用了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函数彻底能够看做多个异步操做，包装成的一个Promise对象，而await命令就是内部then命令的语法糖。

语法

async怎么使用呢？

一个函数前面加上async，就可让这个函数数成为异步函数，跳出本来的执行顺序

console.log(1)
async function asyfun () {
   console.log(2)
}
asyfun();
console.log(3)

// 打印结果：1，3，2
复制代码

（1）async函数返回一个Promise对象。

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

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(v),
  e => console.log(e)
)
// Error: 出错了
复制代码

（2）async函数返回的Promise对象，必须等到内部全部await命令的Promise对象执行完，才会发生状态改变。也就是说，只有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"

复制代码

（3）正常状况下，await命令后面是一个Promise对象。若是不是，会被转成一个当即resolve的Promise对象。

async function f() {
  return await 123;
}

f().then(v => console.log(v))
// 123
复制代码

上面代码中，await命令的参数是数值123，它被转成Promise对象，并当即resolve。

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

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

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

注意，上面代码中，await语句前面没有return，可是reject方法的参数依然传入了catch方法的回调函数。这里若是在await前面加上return，效果是同样的。

只要一个await语句后面的Promise变为reject，那么整个async函数都会中断执行。

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

上面代码中，第二个await语句是不会执行的，由于第一个await语句状态变成了reject。

为了不这个问题，能够将第一个await放在try...catch结构里面，这样第二个await就会执行。

async function f() {
  try {
    await Promise.reject('出错了');
  } catch(e) {
  }
  return await Promise.resolve('hello world');
}

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

复制代码

另外一种方法是await后面的Promise对象再跟一个catch方面，处理前面可能出现的错误。

async function f() {
  await Promise.reject('出错了')
    .catch(e => console.log(e));
  return await Promise.resolve('hello world');
}

f()
.then(v => console.log(v))
// 出错了
// hello world
复制代码

若是有多个await命令，能够统一放在try...catch结构中。

async function main() {
  try {
    var val1 = await firstStep();
    var val2 = await secondStep(val1);
    var val3 = await thirdStep(val1, val2);

    console.log('Final: ', val3);
  }
  catch (err) {
    console.error(err);
  }
}
复制代码

（4）若是await后面的异步操做出错，那么等同于async函数返回的Promise对象被reject。

async function f() {
  await new Promise(function (resolve, reject) {
    throw new Error('出错了');
  });
}

f()
.then(v => console.log(v))
.catch(e => console.log(e))
// Error：出错了
复制代码

上面代码中，async函数f执行后，await后面的Promise对象会抛出一个错误对象，致使catch方法的回调函数被调用，它的参数就是抛出的错误对象。具体的执行机制，能够参考后文的“async函数的实现”。

防止出错的方法，也是将其放在try...catch代码块之中。

async function f() {
  try {
    await new Promise(function (resolve, reject) {
      throw new Error('出错了');
    });
  } catch(e) {
  }
  return await('hello world');
}
复制代码

---

小结

1. async比generstor更好，语法上更语义化，内置执行器
2. async返回值是Promise，函数内部的return值，会成为then方法回调函数的参数。
3. await只能在async函数内部使用
4. 若是await后面的异步操做出错，那么等同于async函数返回的Promise对象被reject

---

本文首发于微信公众号：node前端