ECMAScript 6入门-13_异步操作

三异步操作

2018.1.28 星期日 22:18

p171-P194

异步编程对JavaScript语言太重要。JavaScript只有一根线程，如果没有异步编程，根本没法用，非卡死不可。

ES6诞生以前，异步编程的方法，大概有下面四种。
1. 回调函数
2. 事件监听
3. 发布/订阅
4. Promise 对象
ES6将JavaScript异步编程带入了一个全新的阶段。
### 3.1 基本概念
1. 异步
2. 回调函数

fs.readFile(‘/etc/passwd’, function (err, data) {
if (err) throw err;
console.log(data);
});
/EXTERNAL/ 一个有趣的问题是，为什么Node.js约定，回调函数的第一个参数，必须是错误对象err（如果没有错误，该参数就是null）？原因是执行分成两段，在这两段之间抛出的错误，程序无法捕捉，只能当作参数，传入第二段。
3. Promise
/BACKGROUND/ 回调函数本身并没有问题，它的问题出现在多个回调函数嵌套。假定读取A文件之后，再读取B文件，不难想象，如果依次读取多个文件，就会出现多重嵌套。代码不是纵向发展，而是横向发展，很快就会乱成一团，无法管理。这种情况就称为“回调函数噩梦”（callback hell）。

/RESOLVE/ Promise就是为了解决这个问题而提出的。它不是新的语法功能，而是一种新的写法*，允许将回调函数的横向加载，改成纵向加载。

可以看到，Promise 的写法只是回调函数的改进，使用then方法以后，异步任务的两段执行看得更清楚了，除此以外，并无新意。
/PROBLEMS/ Promise 的最大问题是代码冗余，原来的任务被Promise 包装了一下，不管什么操作，一眼看去都是一堆then，原来的语义变得很不清楚。
4. 那么，有没有更好的写法呢
### 3.2 Generator函数
#### 1 协程
传统的编程语言，早有异步编程的解决方案（其实是多任务的解决方案）。其中有一种叫做”协程”（coroutine），意思是多个线程互相协作，完成异步任务。
协程有点像函数，又有点像线程。它的运行流程大致如下。
。。
function asnycJob() {
// …其他代码
var f = yield readFile(fileA);
// …其他代码
}
上面代码的函数asyncJob是一个协程，它的奥妙就在其中的yield命令。它表示执行到此处，执行权将交给其他协程。也就是说，yield命令是异步两个阶段的分界线。
协程遇到 yield 命令就暂停，等到执行权返回，再从暂停的地方继续往后执行。它的最大优点，就是代码的写法非常像同步操作，如果去除yield命令，简直一模一样。
#### 2 Generator函数的概念
Generator函数是协程在ES6的实现，最大特点就是可以交出函数的执行权（即暂停执行）。

整个Generator函数就是一个封装的异步任务，或者说是异步任务的容器。异步操作需要暂停的地方，都用yield语句注明。

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函数是否执行完毕，即是否还有下一个阶段。
#### 3 Generator函数的数据交换和错误处理
Generator函数可以暂停执行和恢复执行，这是它能封装异步任务的根本原因。除此之外，它还有两个特性，使它可以作为异步编程的完整解决方案：函数体内外的数据交换和错误处理机制。
1. 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 }
作为上个阶段异步任务的返回结果，被函数体内的变量y接收。因此，这一步的 value 属性，返回的就是2（变量y的值）。
2. 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代码块捕获。这意味着，出错的代码与处理错误的代码，实现了时间和空间上的分离，这对于异步编程无疑是很重要的
#### 4 异步任务的封装
1. 下面看看如何使用 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命令。

2. 执行这段代码的方法如下。

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 方法。

/PROBLEMS/ 可以看到，虽然 Generator 函数将异步操作表示得很简洁，但是流程管理却不方便（即何时执行第一阶段、何时执行第二阶段）。
### 3.3 Thunk函数
var x = 1;
function f(m){
return m 2;
}
f(x + 5)
#### 1 参数的求值策略
1. 一种意见是”传值调用”（call by value），即在进入函数体之前，就计算 x + 5 的值（等于6），再将这个值传入函数f 。C语言就采用这种策略。
f(6)
2. 另一种意见是”传名调用”（call by name），即直接将表达式 x + 5 传入函数体，只在用到它的时候求值。Hskell语言采用这种策略。
`(x + 5) 2`
3. 传值调用和传名调用，哪一种比较好？回答是各有利弊。传值调用比较简单，但是对参数求值的时候，实际上还没用到这个参数，有可能造成性能损失。

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

#### 2 Thunk函数的含义
编译器的”传名调用”实现，往往是将参数放到一个临时函数之中，再将这个临时函数传入函数体。这个临时函数就叫做Thunk函数。
function f(m){
return m 2;
}
f(x + 5);
// 等同于
var thunk = function () {
return x + 5;
};
function f(thunk){
return thunk() 2;
}

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 就会先返回，等到触发的异步操作完成，再接着执行函数体内后面的语句。

下面是一个例子。

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

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

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 注意点

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命令只能用在async函数之中，如果用在普通函数，就会报错。
但是，如果将forEach方法的参数改成async函数，也有问题。
```
async function dbFuc(db) {
    let docs = [{}, {}, {}];
    // 可能得到错误结果
    docs.forEach(async function (doc) {
        await db.post(doc);
    });
}
```
上面代码可能不会正常工作，原因是这时三个 db.post 操作将是并发执行，也就是同时执行，而不是继发执行。正确的写法是采用for循环。
如果确实希望多个请求并发执行，可以使用 Promise.all 方法。
5 与Promise、Generator的比较
假定某个DOM元素上面，部署了一系列的动画，前一个动画结束，才能开始后一个。如果当中有一个动画出错，就不再往下执行，返回上一个成功执行的动画的返回值。

首先是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;
    });
}

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

最后是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

读后总结：

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

三 异步操作