JavaScript(ES6) Async

JavaScript(ES6) Async

JavaScript(ES6) - Async

异步编程对JavaScript语言太重要。Javascript语言的执行环境是“单线程”的，如果没有异步编程，根本没法用，非卡死不可。
ES6诞生以前，异步编程的方法，大概有下面四种。
回调函数事件监听发布/订阅Promise 对象ES6将JavaScript异步编程带入了一个全新的阶段，ES7的Async函数更是提出了异步编程的终极解决方案。
基本概念异步所谓"异步"，简单说就是一个任务分成两段，先执行第一段，然后转而执行其他任务，等做好了准备，再回过头执行第二段。
比如，有一个任务是读取文件进行处理，任务的第一段是向操作系统发出请求，要求读取文件。然后，程序执行其他任务，等到操作系统返回文件，再接着执行任务的第二段（处理文件）。这种不连续的执行，就叫做异步。
相应地，连续的执行就叫做同步。由于是连续执行，不能插入其他任务，所以操作系统从硬盘读取文件的这段时间，程序只能干等着。
回调函数JavaScript语言对异步编程的实现，就是回调函数。所谓回调函数，就是把任务的第二段单独写在一个函数里面，等到重新执行这个任务的时候，就直接调用这个函数。它的英语名字callback，直译过来就是"重新调用"。
读取文件进行处理，是这样写的。

fs.readFile('/etc/passwd', function (err, data) {  if (err) throw err;  console.log(data);});

上面代码中，readFile函数的第二个参数，就是回调函数，也就是任务的第二段。等到操作系统返回了/etc/passwd这个文件以后，回调函数才会执行。
一个有趣的问题是，为什么Node.js约定，回调函数的第一个参数，必须是错误对象err（如果没有错误，该参数就是null）？原因是执行分成两段，在这两段之间抛出的错误，程序无法捕捉，只能当作参数，传入第二段。
Promise回调函数本身并没有问题，它的问题出现在多个回调函数嵌套。假定读取A文件之后，再读取B文件，代码如下。

fs.readFile(fileA, function (err, data) {  fs.readFile(fileB, function (err, data) {    // ...  });});

不难想象，如果依次读取多个文件，就会出现多重嵌套。代码不是纵向发展，而是横向发展，很快就会乱成一团，无法管理。这种情况就称为"回调函数地狱"（callback hell）。
Promise就是为了解决这个问题而提出的。它不是新的语法功能，而是一种新的写法，允许将回调函数的嵌套，改成链式调用。采用Promise，连续读取多个文件，写法如下。

var readFile = require('fs-readfile-promise');readFile(fileA).then(function(data){  console.log(data.toString());}).then(function(){  return readFile(fileB);}).then(function(data){  console.log(data.toString());}).catch(function(err) {  console.log(err);});

上面代码中，我使用了fs-readfile-promise模块，它的作用就是返回一个Promise版本的readFile函数。Promise提供then方法加载回调函数，catch方法捕捉执行过程中抛出的错误。
可以看到，Promise 的写法只是回调函数的改进，使用then方法以后，异步任务的两段执行看得更清楚了，除此以外，并无新意。
Promise 的最大问题是代码冗余，原来的任务被Promise 包装了一下，不管什么操作，一眼看去都是一堆 then，原来的语义变得很不清楚。
那么，有没有更好的写法呢？
Generator函数协程传统的编程语言，早有异步编程的解决方案（其实是多任务的解决方案）。其中有一种叫做"协程"（coroutine），意思是多个线程互相协作，完成异步任务。
协程有点像函数，又有点像线程。它的运行流程大致如下。
第一步，协程A开始执行。第二步，协程A执行到一半，进入暂停，执行权转移到协程B。第三步，（一段时间后）协程B交还执行权。第四步，协程A恢复执行。上面流程的协程A，就是异步任务，因为它分成两段（或多段）执行。
举例来说，读取文件的协程写法如下。

function *asyncJob() {  // ...其他代码  var f = yield readFile(fileA);  // ...其他代码}

上面代码的函数asyncJob是一个协程，它的奥妙就在其中的yield命令。它表示执行到此处，执行权将交给其他协程。也就是说，yield命令是异步两个阶段的分界线。
协程遇到yield命令就暂停，等到执行权返回，再从暂停的地方继续往后执行。它的最大优点，就是代码的写法非常像同步操作，如果去除yield命令，简直一模一样。
Generator函数的概念Generator函数是协程在ES6的实现，最大特点就是可以交出函数的执行权（即暂停执行）。
整个Generator函数就是一个封装的异步任务，或者说是异步任务的容器。异步操作需要暂停的地方，都用yield语句注明。Generator函数的执行方法如下。

function* gen(x){  var y = yield x + 2;  return y;}var g = gen(1);g.next() // { value: 3, done: false }g.next() // { value: undefined, done: true }

上面代码中，调用Generator函数，会返回一个内部指针（即遍历器）g 。这是Generator函数不同于普通函数的另一个地方，即执行它不会返回结果，返回的是指针对象。调用指针g的next方法，会移动内部指针（即执行异步任务的第一段），指向第一个遇到的yield语句，上例是执行到x + 2为止。
换言之，next方法的作用是分阶段执行Generator函数。每次调用next方法，会返回一个对象，表示当前阶段的信息（value属性和done属性）。value属性是yield语句后面表达式的值，表示当前阶段的值；done属性是一个布尔值，表示Generator函数是否执行完毕，即是否还有下一个阶段。
Generator函数的数据交换和错误处理Generator函数可以暂停执行和恢复执行，这是它能封装异步任务的根本原因。除此之外，它还有两个特性，使它可以作为异步编程的完整解决方案：函数体内外的数据交换和错误处理机制。
next方法返回值的value属性，是Generator函数向外输出数据；next方法还可以接受参数，这是向Generator函数体内输入数据。

function* gen(x){  var y = yield x + 2;  return y;}var g = gen(1);g.next() // { value: 3, done: false }g.next(2) // { value: 2, done: true }

上面代码中，第一个next方法的value属性，返回表达式x + 2的值（3）。第二个next方法带有参数2，这个参数可以传入 Generator 函数，作为上个阶段异步任务的返回结果，被函数体内的变量y接收。因此，这一步的 value 属性，返回的就是2（变量y的值）。
Generator 函数内部还可以部署错误处理代码，捕获函数体外抛出的错误。

function* gen(x){  try {    var y = yield x + 2;  } catch (e){    console.log(e);  }  return y;}var g = gen(1);g.next();g.throw('出错了');// 出错了

上面代码的最后一行，Generator函数体外，使用指针对象的throw方法抛出的错误，可以被函数体内的try ...catch代码块捕获。这意味着，出错的代码与处理错误的代码，实现了时间和空间上的分离，这对于异步编程无疑是很重要的。
异步任务的封装下面看看如何使用 Generator 函数，执行一个真实的异步任务。

var fetch = require('node-fetch');function* gen(){  var url = 'https://api.github.com/users/github';  var result = yield fetch(url);  console.log(result.bio);}

上面代码中，Generator函数封装了一个异步操作，该操作先读取一个远程接口，然后从JSON格式的数据解析信息。就像前面说过的，这段代码非常像同步操作，除了加上了yield命令。
执行这段代码的方法如下。

var g = gen();var result = g.next();result.value.then(function(data){  return data.json();}).then(function(data){  g.next(data);});

上面代码中，首先执行Generator函数，获取遍历器对象，然后使用next 方法（第二行），执行异步任务的第一阶段。由于Fetch模块返回的是一个Promise对象，因此要用then方法调用下一个next 方法。
可以看到，虽然 Generator 函数将异步操作表示得很简洁，但是流程管理却不方便（即何时执行第一阶段、何时执行第二阶段）。
Thunk函数参数的求值策略Thunk函数早在上个世纪60年代就诞生了。
那时，编程语言刚刚起步，计算机学家还在研究，编译器怎么写比较好。一个争论的焦点是"求值策略"，即函数的参数到底应该何时求值。

var x = 1;function f(m){  return m * 2;}f(x + 5)

上面代码先定义函数f，然后向它传入表达式x + 5。请问，这个表达式应该何时求值？
一种意见是"传值调用"（call by value），即在进入函数体之前，就计算x + 5的值（等于6），再将这个值传入函数f 。C语言就采用这种策略。

f(x + 5)// 传值调用时，等同于f(6)

另一种意见是"传名调用"（call by name），即直接将表达式x + 5传入函数体，只在用到它的时候求值。Haskell语言采用这种策略。

f(x + 5)// 传名调用时，等同于(x + 5) * 2

传值调用和传名调用，哪一种比较好？回答是各有利弊。传值调用比较简单，但是对参数求值的时候，实际上还没用到这个参数，有可能造成性能损失。

function f(a, b){  return b;}f(3 * x * x - 2 * x - 1, x);

上面代码中，函数f的第一个参数是一个复杂的表达式，但是函数体内根本没用到。对这个参数求值，实际上是不必要的。因此，有一些计算机学家倾向于"传名调用"，即只在执行时求值。
Thunk函数的含义编译器的"传名调用"实现，往往是将参数放到一个临时函数之中，再将这个临时函数传入函数体。这个临时函数就叫做Thunk函数。

function f(m){  return m * 2;}f(x + 5);// 等同于var thunk = function () {  return x + 5;};function f(thunk){  return thunk() * 2;}

上面代码中，函数f的参数x + 5被一个函数替换了。凡是用到原参数的地方，对Thunk函数求值即可。
这就是Thunk函数的定义，它是"传名调用"的一种实现策略，用来替换某个表达式。
JavaScript语言的Thunk函数JavaScript语言是传值调用，它的Thunk函数含义有所不同。在JavaScript语言中，Thunk函数替换的不是表达式，而是多参数函数，将其替换成单参数的版本，且只接受回调函数作为参数。

// 正常版本的readFile（多参数版本）fs.readFile(fileName, callback);// Thunk版本的readFile（单参数版本）var readFileThunk = Thunk(fileName);readFileThunk(callback);var Thunk = function (fileName){  return function (callback){    return fs.readFile(fileName, callback);  };};

上面代码中，fs模块的readFile方法是一个多参数函数，两个参数分别为文件名和回调函数。经过转换器处理，它变成了一个单参数函数，只接受回调函数作为参数。这个单参数版本，就叫做Thunk函数。
任何函数，只要参数有回调函数，就能写成Thunk函数的形式。下面是一个简单的Thunk函数转换器。

// ES5版本var Thunk = function(fn){  return function (){    var args = Array.prototype.slice.call(arguments);    return function (callback){      args.push(callback);      return fn.apply(this, args);    }  };};// ES6版本var Thunk = function(fn) {  return function (...args) {    return function (callback) {      return fn.call(this, ...args, callback);    }  };};

使用上面的转换器，生成fs.readFile的Thunk函数。

var readFileThunk = Thunk(fs.readFile);readFileThunk(fileA)(callback);

下面是另一个完整的例子。

function f(a, cb) {  cb(a);}let ft = Thunk(f);let log = console.log.bind(console);ft(1)(log) // 1

Thunkify模块生产环境的转换器，建议使用Thunkify模块。
首先是安装。

$ npm install thunkify

使用方式如下。

var thunkify = require('thunkify');var fs = require('fs');var read = thunkify(fs.readFile);read('package.json')(function(err, str){  // ...});

Thunkify的源码与上一节那个简单的转换器非常像。

function thunkify(fn){  return function(){    var args = new Array(arguments.length);    var ctx = this;    for(var i = 0; i < args.length; ++i) {      args[i] = arguments[i];    }    return function(done){      var called;      args.push(function(){        if (called) return;        called = true;        done.apply(null, arguments);      });      try {        fn.apply(ctx, args);      } catch (err) {        done(err);      }    }  }};

它的源码主要多了一个检查机制，变量called确保回调函数只运行一次。这样的设计与下文的Generator函数相关。请看下面的例子。

function f(a, b, callback){  var sum = a + b;  callback(sum);  callback(sum);}var ft = thunkify(f);var print = console.log.bind(console);ft(1, 2)(print);// 3

上面代码中，由于thunkify只允许回调函数执行一次，所以只输出一行结果。
Generator 函数的流程管理你可能会问， Thunk函数有什么用？回答是以前确实没什么用，但是ES6有了Generator函数，Thunk函数现在可以用于Generator函数的自动流程管理。
Generator函数可以自动执行。

function* gen() {  // ...}var g = gen();var res = g.next();while(!res.done){  console.log(res.value);  res = g.next();}

上面代码中，Generator函数gen会自动执行完所有步骤。
但是，这不适合异步操作。如果必须保证前一步执行完，才能执行后一步，上面的自动执行就不可行。这时，Thunk函数就能派上用处。以读取文件为例。下面的Generator函数封装了两个异步操作。

var fs = require('fs');var thunkify = require('thunkify');var readFile = thunkify(fs.readFile);var gen = function* (){  var r1 = yield readFile('/etc/fstab');  console.log(r1.toString());  var r2 = yield readFile('/etc/shells');  console.log(r2.toString());};

上面代码中，yield命令用于将程序的执行权移出Generator函数，那么就需要一种方法，将执行权再交还给Generator函数。
这种方法就是Thunk函数，因为它可以在回调函数里，将执行权交还给Generator函数。为了便于理解，我们先看如何手动执行上面这个Generator函数。

var g = gen();var r1 = g.next();r1.value(function(err, data){  if (err) throw err;  var r2 = g.next(data);  r2.value(function(err, data){    if (err) throw err;    g.next(data);  });});

上面代码中，变量g是Generator函数的内部指针，表示目前执行到哪一步。next方法负责将指针移动到下一步，并返回该步的信息（value属性和done属性）。
仔细查看上面的代码，可以发现Generator函数的执行过程，其实是将同一个回调函数，反复传入next方法的value属性。这使得我们可以用递归来自动完成这个过程。
Thunk函数的自动流程管理Thunk函数真正的威力，在于可以自动执行Generator函数。下面就是一个基于Thunk函数的Generator执行器。

function run(fn) {  var gen = fn();  function next(err, data) {    var result = gen.next(data);    if (result.done) return;    result.value(next);  }  next();}function* g() {  // ...}run(g);

上面代码的run函数，就是一个Generator函数的自动执行器。内部的next函数就是Thunk的回调函数。next函数先将指针移到Generator函数的下一步（gen.next方法），然后判断Generator函数是否结束（result.done属性），如果没结束，就将next函数再传入Thunk函数（result.value属性），否则就直接退出。
有了这个执行器，执行Generator函数方便多了。不管内部有多少个异步操作，直接把Generator函数传入run函数即可。当然，前提是每一个异步操作，都要是Thunk函数，也就是说，跟在yield命令后面的必须是Thunk函数。

var g = function* (){  var f1 = yield readFile('fileA');  var f2 = yield readFile('fileB');  // ...  var fn = yield readFile('fileN');};run(g);

上面代码中，函数g封装了n个异步的读取文件操作，只要执行run函数，这些操作就会自动完成。这样一来，异步操作不仅可以写得像同步操作，而且一行代码就可以执行。
Thunk函数并不是Generator函数自动执行的唯一方案。因为自动执行的关键是，必须有一种机制，自动控制Generator函数的流程，接收和交还程序的执行权。回调函数可以做到这一点，Promise 对象也可以做到这一点。
co模块基本用法co模块是著名程序员TJ Holowaychuk于2013年6月发布的一个小工具，用于Generator函数的自动执行。
比如，有一个Generator函数，用于依次读取两个文件。

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

co模块可以让你不用编写Generator函数的执行器。

var co = require('co');co(gen);

上面代码中，Generator函数只要传入co函数，就会自动执行。
co函数返回一个Promise对象，因此可以用then方法添加回调函数。

co(gen).then(function (){  console.log('Generator 函数执行完成');});

上面代码中，等到Generator函数执行结束，就会输出一行提示。
co模块的原理为什么co可以自动执行Generator函数？
前面说过，Generator就是一个异步操作的容器。它的自动执行需要一种机制，当异步操作有了结果，能够自动交回执行权。
两种方法可以做到这一点。
（1）回调函数。将异步操作包装成Thunk函数，在回调函数里面交回执行权。
（2）Promise 对象。将异步操作包装成Promise对象，用then方法交回执行权。
co模块其实就是将两种自动执行器（Thunk函数和Promise对象），包装成一个模块。使用co的前提条件是，Generator函数的yield命令后面，只能是Thunk函数或Promise对象。
上一节已经介绍了基于Thunk函数的自动执行器。下面来看，基于Promise对象的自动执行器。这是理解co模块必须的。
基于Promise对象的自动执行还是沿用上面的例子。首先，把fs模块的readFile方法包装成一个Promise对象。

var fs = require('fs');var readFile = function (fileName){  return new Promise(function (resolve, reject){    fs.readFile(fileName, function(error, data){      if (error) return 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());};

然后，手动执行上面的Generator函数。

var g = gen();g.next().value.then(function(data){  g.next(data).value.then(function(data){    g.next(data);  });});

手动执行其实就是用then方法，层层添加回调函数。理解了这一点，就可以写出一个自动执行器。

function run(gen){  var g = gen();  function next(data){    var result = g.next(data);    if (result.done) return result.value;    result.value.then(function(data){      next(data);    });  }  next();}run(gen);

上面代码中，只要Generator函数还没执行到最后一步，next函数就调用自身，以此实现自动执行。
co模块的源码co就是上面那个自动执行器的扩展，它的源码只有几十行，非常简单。
首先，co函数接受Generator函数作为参数，返回一个 Promise 对象。

function co(gen) {  var ctx = this;  return new Promise(function(resolve, reject) {  });}

在返回的Promise对象里面，co先检查参数gen是否为Generator函数。如果是，就执行该函数，得到一个内部指针对象；如果不是就返回，并将Promise对象的状态改为resolved。

function co(gen) {  var ctx = this;  return new Promise(function(resolve, reject) {    if (typeof gen === 'function') gen = gen.call(ctx);    if (!gen || typeof gen.next !== 'function') return resolve(gen);  });}

接着，co将Generator函数的内部指针对象的next方法，包装成onFulfilled函数。这主要是为了能够捕捉抛出的错误。

function co(gen) {  var ctx = this;  return new Promise(function(resolve, reject) {    if (typeof gen === 'function') gen = gen.call(ctx);    if (!gen || typeof gen.next !== 'function') return resolve(gen);    onFulfilled();    function onFulfilled(res) {      var ret;      try {        ret = gen.next(res);      } catch (e) {        return reject(e);      }      next(ret);    }  });}

最后，就是关键的next函数，它会反复调用自身。

function next(ret) {  if (ret.done) return resolve(ret.value);  var value = toPromise.call(ctx, ret.value);  if (value && isPromise(value)) return value.then(onFulfilled, onRejected);  return onRejected(new TypeError('You may only yield a function, promise, generator, array, or object, '    + 'but the following object was passed: "' + String(ret.value) + '"'));}

上面代码中，next 函数的内部代码，一共只有四行命令。
第一行，检查当前是否为 Generator 函数的最后一步，如果是就返回。
第二行，确保每一步的返回值，是 Promise 对象。
第三行，使用 then 方法，为返回值加上回调函数，然后通过 onFulfilled 函数再次调用 next 函数。
第四行，在参数不符合要求的情况下（参数非 Thunk 函数和 Promise 对象），将 Promise 对象的状态改为 rejected，从而终止执行。
处理并发的异步操作co支持并发的异步操作，即允许某些操作同时进行，等到它们全部完成，才进行下一步。
这时，要把并发的操作都放在数组或对象里面，跟在yield语句后面。

// 数组的写法co(function* () {  var res = yield [    Promise.resolve(1),    Promise.resolve(2)  ];  console.log(res);}).catch(onerror);// 对象的写法co(function* () {  var res = yield {    1: Promise.resolve(1),    2: Promise.resolve(2),  };  console.log(res);}).catch(onerror);

下面是另一个例子。

co(function* () {  var values = [n1, n2, n3];  yield values.map(somethingAsync);});function* somethingAsync(x) {  // do something async  return y}

上面的代码允许并发三个somethingAsync异步操作，等到它们全部完成，才会进行下一步。
async函数含义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，仅此而已。
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函数的语法规则总体上比较简单，难点是错误处理机制。
（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');}

async函数的实现async 函数的实现，就是将 Generator 函数和自动执行器，包装在一个函数里。

async function fn(args){  // ...}// 等同于function fn(args){  return spawn(function*() {    // ...  });}

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

function spawn(genF) {  return new Promise(function(resolve, reject) {    var gen = genF();    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(v) {        step(function() { return gen.next(v); });      }, function(e) {        step(function() { return gen.throw(e); });      });    }    step(function() { return gen.next(undefined); });  });}

async函数是非常新的语法功能，新到都不属于 ES6，而是属于 ES7。目前，它仍处于提案阶段，但是转码器Babel和regenerator都已经支持，转码后就能使用。
async 函数的用法async函数返回一个Promise对象，可以使用then方法添加回调函数。当函数执行的时候，一旦遇到await就会先返回，等到触发的异步操作完成，再接着执行函数体内后面的语句。
下面是一个例子。

async function getStockPriceByName(name) {  var symbol = await getStockSymbol(name);  var stockPrice = await getStockPrice(symbol);  return stockPrice;}getStockPriceByName('goog').then(function (result) {  console.log(result);});

上面代码是一个获取股票报价的函数，函数前面的async关键字，表明该函数内部有异步操作。调用该函数时，会立即返回一个Promise对象。
下面的例子，指定多少毫秒后输出一个值。

function timeout(ms) {  return new Promise((resolve) => {    setTimeout(resolve, ms);  });}async function asyncPrint(value, ms) {  await timeout(ms);  console.log(value)}asyncPrint('hello world', 50);

上面代码指定50毫秒以后，输出"hello world"。
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 () => {};

注意点第一点，await命令后面的Promise对象，运行结果可能是rejected，所以最好把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);  };}

第二点，多个await命令后面的异步操作，如果不存在继发关系，最好让它们同时触发。

let foo = await getFoo();let bar = await getBar();

上面代码中，getFoo和getBar是两个独立的异步操作（即互不依赖），被写成继发关系。这样比较耗时，因为只有getFoo完成以后，才会执行getBar，完全可以让它们同时触发。

// 写法一let [foo, bar] = await Promise.all([getFoo(), getBar()]);// 写法二let fooPromise = getFoo();let barPromise = getBar();let foo = await fooPromise;let bar = await barPromise;

上面两种写法，getFoo和getBar都是同时触发，这样就会缩短程序的执行时间。
第三点，await命令只能用在async函数之中，如果用在普通函数，就会报错。

async function dbFuc(db) {  let docs = [{}, {}, {}];  // 报错  docs.forEach(function (doc) {    await db.post(doc);  });}

上面代码会报错，因为await用在普通函数之中了。但是，如果将forEach方法的参数改成async函数，也有问题。

async function dbFuc(db) {  let docs = [{}, {}, {}];  // 可能得到错误结果  docs.forEach(async function (doc) {    await db.post(doc);  });}

上面代码可能不会正常工作，原因是这时三个db.post操作将是并发执行，也就是同时执行，而不是继发执行。正确的写法是采用for循环。

async function dbFuc(db) {  let docs = [{}, {}, {}];  for (let doc of docs) {    await db.post(doc);  }}

如果确实希望多个请求并发执行，可以使用Promise.all方法。

async function dbFuc(db) {  let docs = [{}, {}, {}];  let promises = docs.map((doc) => db.post(doc));  let results = await Promise.all(promises);  console.log(results);}// 或者使用下面的写法async function dbFuc(db) {  let docs = [{}, {}, {}];  let promises = docs.map((doc) => db.post(doc));  let results = [];  for (let promise of promises) {    results.push(await promise);  }  console.log(results);}

ES6将await增加为保留字。使用这个词作为标识符，在ES5是合法的，在ES6将抛出SyntaxError。
与Promise、Generator的比较我们通过一个例子，来看Async函数与Promise、Generator函数的区别。
假定某个DOM元素上面，部署了一系列的动画，前一个动画结束，才能开始后一个。如果当中有一个动画出错，就不再往下执行，返回上一个成功执行的动画的返回值。
首先是Promise的写法。

function chainAnimationsPromise(elem, animations) {  // 变量ret用来保存上一个动画的返回值  var ret = null;  // 新建一个空的Promise  var p = Promise.resolve();  // 使用then方法，添加所有动画  for(var anim of animations) {    p = p.then(function(val) {      ret = val;      return anim(elem);    });  }  // 返回一个部署了错误捕捉机制的Promise  return p.catch(function(e) {    /* 忽略错误，继续执行 */  }).then(function() {    return ret;  });}

虽然Promise的写法比回调函数的写法大大改进，但是一眼看上去，代码完全都是Promise的API（then、catch等等），操作本身的语义反而不容易看出来。
接着是Generator函数的写法。

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

上面代码使用Generator函数遍历了每个动画，语义比Promise写法更清晰，用户定义的操作全部都出现在spawn函数的内部。这个写法的问题在于，必须有一个任务运行器，自动执行Generator函数，上面代码的spawn函数就是自动执行器，它返回一个Promise对象，而且必须保证yield语句后面的表达式，必须返回一个Promise。
最后是Async函数的写法。

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

可以看到Async函数的实现最简洁，最符合语义，几乎没有语义不相关的代码。它将Generator写法中的自动执行器，改在语言层面提供，不暴露给用户，因此代码量最少。如果使用Generator写法，自动执行器需要用户自己提供。
实例：按顺序完成异步操作实际开发中，经常遇到一组异步操作，需要按照顺序完成。比如，依次远程读取一组URL，然后按照读取的顺序输出结果。
Promise 的写法如下。

function logInOrder(urls) {  // 远程读取所有URL  const textPromises = urls.map(url => {    return fetch(url).then(response => response.text());  });  // 按次序输出  textPromises.reduce((chain, textPromise) => {    return chain.then(() => textPromise)      .then(text => console.log(text));  }, Promise.resolve());}

上面代码使用fetch方法，同时远程读取一组URL。每个fetch操作都返回一个Promise对象，放入textPromises数组。然后，reduce方法依次处理每个Promise对象，然后使用then，将所有Promise对象连起来，因此就可以依次输出结果。
这种写法不太直观，可读性比较差。下面是async函数实现。

async function logInOrder(urls) {  for (const url of urls) {    const response = await fetch(url);    console.log(await response.text());  }}

上面代码确实大大简化，问题是所有远程操作都是继发。只有前一个URL返回结果，才会去读取下一个URL，这样做效率很差，非常浪费时间。我们需要的是并发发出远程请求。

async function logInOrder(urls) {  // 并发读取远程URL  const textPromises = urls.map(async url => {    const response = await fetch(url);    return response.text();  });  // 按次序输出  for (const textPromise of textPromises) {    console.log(await textPromise);  }}

上面代码中，虽然map方法的参数是async函数，但它是并发执行的，因为只有async函数内部是继发执行，外部不受影响。后面的for..of循环内部使用了await，因此实现了按顺序输出。
异步遍历器《遍历器》一章说过，Iterator接口是一种数据遍历的协议，只要调用遍历器对象的next方法，就会得到一个表示当前成员信息的对象{value, done}。其中，value表示当前的数据的值，done是一个布尔值，表示遍历是否结束。
这隐含着规定，next方法是同步的，只要调用就必须立刻返回值。也就是说，一旦执行next方法，就必须同步地得到value和done这两方面的信息。这对于同步操作，当然没有问题，但对于异步操作，就不太合适了。目前的解决方法是，Generator函数里面的异步操作，返回一个Thunk函数或者Promise对象，即value属性是一个Thunk函数或者Promise对象，等待以后返回真正的值，而done属性则还是同步产生的。
目前，有一个提案，为异步操作提供原生的遍历器接口，即value和done这两个属性都是异步产生，这称为”异步遍历器“（Async Iterator）。
异步遍历的接口异步遍历器的最大的语法特点，就是调用遍历器的next方法，返回的是一个Promise对象。

asyncIterator  .next()  .then(    ({ value, done }) => /* ... */  );

上面代码中，asyncIterator是一个异步遍历器，调用next方法以后，返回一个Promise对象。因此，可以使用then方法指定，这个Promise对象的状态变为resolve以后的回调函数。回调函数的参数，则是一个具有value和done两个属性的对象，这个跟同步遍历器是一样的。
我们知道，一个对象的同步遍历器的接口，部署在Symbol.iterator属性上面。同样地，对象的异步遍历器接口，部署在Symbol.asyncIterator属性上面。不管是什么样的对象，只要它的Symbol.asyncIterator属性有值，就表示应该对它进行异步遍历。
下面是一个异步遍历器的例子。

const asyncIterable = createAsyncIterable(['a', 'b']);const asyncIterator = someCollection[Symbol.asyncIterator]();asyncIterator.next().then(iterResult1 => {  console.log(iterResult1); // { value: 'a', done: false }  return asyncIterator.next();}).then(iterResult2 => {  console.log(iterResult2); // { value: 'b', done: false }  return asyncIterator.next();}).then(iterResult3 => {  console.log(iterResult3); // { value: undefined, done: true }});

上面代码中，异步遍历器其实返回了两次值。第一次调用的时候，返回一个Promise对象；等到Promise对象resolve了，再返回一个表示当前数据成员信息的对象。这就是说，异步遍历器与同步遍历器最终行为是一致的，只是会先返回Promise对象，作为中介。
由于异步遍历器的next方法，返回的是一个Promise对象。因此，可以把它放在await命令后面。

async function f() {  const asyncIterable = createAsyncIterable(['a', 'b']);  const asyncIterator = asyncIterable[Symbol.asyncIterator]();  console.log(await asyncIterator.next());  // { value: 'a', done: false }  console.log(await asyncIterator.next());  // { value: 'b', done: false }  console.log(await asyncIterator.next());  // { value: undefined, done: true }}

上面代码中，next方法用await处理以后，就不必使用then方法了。整个流程已经很接近同步处理了。
注意，异步遍历器的next方法是可以连续调用的，不必等到上一步产生的Promise对象resolve以后再调用。这种情况下，next方法会累积起来，自动按照每一步的顺序运行下去。下面是一个例子，把所有的next方法放在Promise.all方法里面。

const asyncGenObj = createAsyncIterable(['a', 'b']);const [{value: v1}, {value: v2}] = await Promise.all([  asyncGenObj.next(), asyncGenObj.next()]);console.log(v1, v2); // a b

另一种用法是一次性调用所有的next方法，然后await最后一步操作。

const writer = openFile('someFile.txt');writer.next('hello');writer.next('world');await writer.return();

for await...of前面介绍过，for...of循环用于遍历同步的Iterator接口。新引入的for await...of循环，则是用于遍历异步的Iterator接口。

async function f() {  for await (const x of createAsyncIterable(['a', 'b'])) {    console.log(x);  }}// a// b

上面代码中，createAsyncIterable()返回一个异步遍历器，for...of循环自动调用这个遍历器的next方法，会得到一个Promise对象。await用来处理这个Promise对象，一旦resolve，就把得到的值（x）传入for...of的循环体。
如果next方法返回的Promise对象被reject，那么就要用try...catch捕捉。

async function () {  try {    for await (const x of createRejectingIterable()) {      console.log(x);    }  } catch (e) {    console.error(e);  }}

注意，for await...of循环也可以用于同步遍历器。

(async function () {  for await (const x of ['a', 'b']) {    console.log(x);  }})();// a// b

异步Generator函数就像Generator函数返回一个同步遍历器对象一样，异步Generator函数的作用，是返回一个异步遍历器对象。
在语法上，异步Generator函数就是async函数与Generator函数的结合。

async function* readLines(path) {  let file = await fileOpen(path);  try {    while (!file.EOF) {      yield await file.readLine();    }  } finally {    await file.close();  }}

上面代码中，异步操作前面使用await关键字标明，即await后面的操作，应该返回Promise对象。凡是使用yield关键字的地方，就是next方法的停下来的地方，它后面的表达式的值（即await file.readLine()的值），会作为next()返回对象的value属性，这一点是于同步Generator函数一致的。
可以像下面这样，使用上面代码定义的异步Generator函数。

for await (const line of readLines(filePath)) {  console.log(line);}

异步Generator函数可以与for await...of循环结合起来使用。

async function* prefixLines(asyncIterable) {  for await (const line of asyncIterable) {    yield '> ' + line;  }}

yield命令依然是立刻返回的，但是返回的是一个Promise对象。

async function* asyncGenerator() {  console.log('Start');  const result = await doSomethingAsync(); // (A)  yield 'Result: '+ result; // (B)  console.log('Done');}

上面代码中，调用next方法以后，会在B处暂停执行，yield命令立刻返回一个Promise对象。这个Promise对象不同于A处await命令后面的那个Promise对象。主要有两点不同，一是A处的Promise对象resolve以后产生的值，会放入result变量；二是B处的Promise对象resolve以后产生的值，是表达式'Result： ' + result的值；二是A处的Promise对象一定先于B处的Promise对象resolve。
如果异步Generator函数抛出错误，会被Promise对象reject，然后抛出的错误被catch方法捕获。

async function* asyncGenerator() {  throw new Error('Problem!');}asyncGenerator().next().catch(err => console.log(err)); // Error: Problem!

注意，普通的async函数返回的是一个Promise对象，而异步Generator函数返回的是一个异步Iterator对象。基本上，可以这样理解，async函数和异步Generator函数，是封装异步操作的两种方法，都用来达到同一种目的。区别在于，前者自带执行器，后者通过for await...of执行，或者自己编写执行器。下面就是一个异步Generator函数的执行器。

async function takeAsync(asyncIterable, count=Infinity) {  const result = [];  const iterator = asyncIterable[Symbol.asyncIterator]();  while (result.length < count) {    const {value,done} = await iterator.next();    if (done) break;    result.push(value);  }  return result;}

上面代码中，异步Generator函数产生的异步遍历器，会通过while循环自动执行，每当await iterator.next()完成，就会进入下一轮循环。
下面是这个自动执行器的一个使用实例。

async function f() {  async function* gen() {    yield 'a';    yield 'b';    yield 'c';  }  return await takeAsync(gen());}f().then(function (result) {  console.log(result); // ['a', 'b', 'c']})

异步Generator函数出现以后，JavaScript就有了四种函数形式：普通函数、async函数、Generator函数和异步Generator函数。请注意区分每种函数的不同之处。
最后，同步的数据结构，也可以使用异步Generator函数。

async function* createAsyncIterable(syncIterable) {  for (const elem of syncIterable) {    yield elem;  }}

上面代码中，由于没有异步操作，所以也就没有使用await关键字。
yield* 语句yield*语句也可以跟一个异步遍历器。

async function* gen1() {  yield 'a';  yield 'b';  return 2;}async function* gen2() {  const result = yield* gen1();}

上面代码中，gen2函数里面的result变量，最后的值是2。
与同步Generator函数一样，for await...of循环会展开yield*。

(async function () {  for await (const x of gen2()) {    console.log(x);  }})();// a// b

异步操作和Async函数--转自：阮一峰《ECMAScript 6 入门》

学习JavaScript循环下的async/await

问题描述
在进行业务开发的过程中，使用了数组的高级函数 map ，同时使用了ES6语法 async/await，发现在 map 循环下执行结果是异步执行，并不符合预期
例子说明

/** * 异步打印数据 */const echo = async (i) => { return new Promise((resolve,reject)=>{ setTimeout(() => { console.log('i===>', i,new Date().toLocaleTimeString()); resolve(i) ; }, 100); })}/** * 模拟异步任务 */const task = async () => { dataArr.forEach( async( item, i ) => { await echo(i); })}/** * 启动函数入口 */const run = async () => { console.log('run-start====>date:', new Date().toLocaleDateString()) await task() ; console.log('run-end======>date:', new Date().toLocaleDateString())}/*** 启动函数*/(async () => { console.log('start...') await run(); console.log('end...')})()//预期效果start...run-start====>date: 2019-2-16i===> 0 23:19:04i===> 1 23:19:04i===> 2 23:19:04i===> 3 23:19:04run-end======>date: 2019-2-16end...//打印结果start...run-start====>date: 2019-2-16run-end======>date: 2019-2-16end...i===> 0 23:19:04i===> 1 23:19:04i===> 2 23:19:04i===> 3 23:19:04

从上面的例子可以看出，在 map 循环下使用 await 后，task任务仍然是异步任务，并不符合预期。原因是Array的map、forEach等函数 不会等到所有的步骤都完成，它只会执行任务和执行下一步，可以理解为 async/await 的效果是无效的
解决方案
使用最原始的for循环for...of将上述的模拟异步任务修改为

for (var i = 0; i < dataArr.length; i++) { await echo(i) } 或 for (const i of dataArr) { await echo(i) }