title: ECMAScript 6入门-13_异步操作
date: 2018.1.28
tags:

• ecmascript
  toc_fold: unfold

三 异步操作

2018.1.28 星期日 22:18

2018.1.29 01：10

2018.1.29 星期一 21:53

3 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函数转换器。
var Thunk = function(fn){
return function (){
var args = Array.prototype.slice.call(arguments);
return function (callback){
args.push(callback);
return fn.apply(this, args);
}
};
};
使用上面的转换器，生成 fs.readFile 的Thunk函数。

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

4 Thunkify模块

生产环境的转换器，建议使用Thunkify模块。

Thunkify的源码与上一节那个简单的转换器非常像。
它的源码主要多了一个检查机制，变量called确保回调函数只运行一次。这样的设计与下文的Generator函数相关

5 Generator 函数的流程管理

你可能会问， Thunk函数有什么用？回答是以前确实没什么用，但是ES6有了Generator函数，Thunk函数现在可以用于Generator函数的自动流程管理。
以读取文件为例。下面的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函数。

6 Thunk函数的自动流程管理

Thunk函数真正的威力，在于可以自动执行Generator函数。
$_EXCLUDE:略过，Thunk 没有感觉到目前的需要；

3.4 co模块

1 基本用法

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

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

co函数返回一个Promise对象，因此可以用then方法添加回调函数。

2 co模块的原理

Generator就是一个异步操作的容器。它的自动执行需要一种机制，当异步操作有了结果，能够自动交回执行权。
两种方法可以做到这一点。
（1）回调函数。将异步操作包装成Thunk函数，在回调函数里面交回执行权。
（2）Promise 对象。将异步操作包装成Promise对象，用then方法交回执行权。
co模块其实就是将两种自动执行器（Thunk函数和Promise对象），包装成一个模块。使用co的前提条件是，Generator函数的yield命令后面，只能是Thunk函数或Promise对象。

上一节已经介绍了基于Thunk函数的自动执行器。下面来看，基于Promise对象的自动执行器。这是理解co模块必须的。

3 基于Promise对象的自动执行

4 co模块的源码

5 处理并发的异步操作

$_EXCLUDE:知道上面两个都是用来自动执行Generator函数的。。慢慢理解吧

3.5 async函数

1 含义

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 函数的改进，体现在以下三点。
（1）内置执行器。Generator函数的执行必须靠执行器，所以才有了co模块，而async 函数自带执行器。也就是说，async函数的执行，与普通函数一模一样，只要一行。

var result = asyncReadFile();

（2）更好的语义。async和await，比起星号和yield，语义更清楚了。async表示函数里有异步操作，await 表示紧跟在后面的表达式需要等待结果。
（3）更广的适用性。 co模块约定，yield命令后面只能是Thunk函数或Promise对象，而async函数的await命令后面，可以跟Promise对象和原始类型的值（数值、字符串和布尔值，但这时等同于同步操作）。

2 async函数的实现

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

spawn 函数的实现，基本就是前文自动执行器的翻版。
$_FALLBACK:前面介绍的两个chunk,co；主角终于出场了

而是属于 ES7。目前，它仍处于提案阶段，但是转码器 Babel 和 regenerator 都已经支持，转码后就能使用。

3 async 函数的用法

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

1. 下面是一个例子。

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

2. 下面的例子，指定多少毫秒后输出一个值

   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);         
   

   4 注意点

3. 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);
   };
   }
   

4. await命令只能用在async函数之中，如果用在普通函数，就会报错。

5. 但是，如果将forEach方法的参数改成async函数，也有问题。

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

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

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

   5 与Promise、Generator的比较

   假定某个DOM元素上面，部署了一系列的动画，前一个动画结束，才能开始后一个。如果当中有一个动画出错，就不再往下执行，返回上一个成功执行的动画的返回值。

7. 首先是Promise的写法。

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

8. 接着是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;
       });
   }
   

9. 最后是Async函数的写法。

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

2018.1.30 0：24

读后总结：

1. 整个章节是在讲异步；
2. 但是理解的不是很深入，只是”知道了”；
3. 截止到目前，实际工作中接触的少；以后肯定要多接触