mirror of
https://github.com/ruanyf/es6tutorial.git
synced 2025-05-27 20:32:21 +00:00
docs(async): 拆分 generator 函数的异步操作与 async 函数
This commit is contained in:
ruanyf
parent
4bf719ef8f
commit
6e944000df
1240
docs/async.md
1240
docs/async.md
File diff suppressed because it is too large
Load Diff
@ -1549,7 +1549,7 @@ sum(1, 100000)
|
||||
|
||||
## 函数参数的尾逗号
|
||||
|
||||
ECMAScript 2017将[允许](https://github.com/jeffmo/es-trailing-function-commas)函数的最后一个参数有尾逗号（trailing comma）。
|
||||
ES2017 [允许](https://github.com/jeffmo/es-trailing-function-commas)函数的最后一个参数有尾逗号（trailing comma）。
|
||||
|
||||
此前，函数定义和调用时，都不允许最后一个参数后面出现逗号。
|
||||
|
||||
@ -1567,7 +1567,7 @@ clownsEverywhere(
|
||||
|
||||
上面代码中，如果在`param2`或`bar`后面加一个逗号，就会报错。
|
||||
|
||||
这样的话，如果以后修改代码，想为函数`clownsEverywhere`添加第三个参数，就势必要在第二个参数后面添加一个逗号。这对版本管理系统来说，就会显示，添加逗号的那一行也发生了变动。这看上去有点冗余，因此新的语法允许定义和调用时，尾部直接有一个逗号。
|
||||
这样的话，如果以后修改代码，想为函数`clownsEverywhere`添加第三个参数，就势必要在第二个参数后面添加一个逗号。这对版本管理系统来说，就会显示添加逗号的那一行也发生了变动。这看上去有点冗余，因此新的语法允许定义和调用时，尾部直接有一个逗号。这与数组和对象的尾逗号规则，保持一致了。
|
||||
|
||||
```javascript
|
||||
function clownsEverywhere(
|
||||
@ -1580,3 +1580,4 @@ clownsEverywhere(
|
||||
'bar',
|
||||
);
|
||||
```
|
||||
|
||||
|
||||
754
docs/generator-async.md
Normal file
754
docs/generator-async.md
Normal file
@ -0,0 +1,754 @@
|
||||
# Generator 函数：异步操作
|
||||
|
||||
异步编程对 JavaScript 语言太重要。Javascript 语言的执行环境是“单线程”的，如果没有异步编程，根本没法用，非卡死不可。本章主要介绍 Generator 函数如何完成异步操作。
|
||||
|
||||
## 传统方法
|
||||
|
||||
ES6 诞生以前，异步编程的方法，大概有下面四种。
|
||||
|
||||
- 回调函数
|
||||
- 事件监听
|
||||
- 发布/订阅
|
||||
- Promise 对象
|
||||
|
||||
Generator 函数将 JavaScript 异步编程带入了一个全新的阶段。
|
||||
|
||||
## 基本概念
|
||||
|
||||
### 异步
|
||||
|
||||
所谓"异步"，简单说就是一个任务不是连续完成的，可以理解成该任务被人为分成两段，先执行第一段，然后转而执行其他任务，等做好了准备，再回过头执行第二段。
|
||||
|
||||
比如，有一个任务是读取文件进行处理，任务的第一段是向操作系统发出请求，要求读取文件。然后，程序执行其他任务，等到操作系统返回文件，再接着执行任务的第二段（处理文件）。这种不连续的执行，就叫做异步。
|
||||
|
||||
相应地，连续的执行就叫做同步。由于是连续执行，不能插入其他任务，所以操作系统从硬盘读取文件的这段时间，程序只能干等着。
|
||||
|
||||
### 回调函数
|
||||
|
||||
JavaScript 语言对异步编程的实现，就是回调函数。所谓回调函数，就是把任务的第二段单独写在一个函数里面，等到重新执行这个任务的时候，就直接调用这个函数。回调函数的英语名字`callback`，直译过来就是"重新调用"。
|
||||
|
||||
读取文件进行处理，是这样写的。
|
||||
|
||||
```javascript
|
||||
fs.readFile('/etc/passwd', 'utf-8', function (err, data) {
|
||||
if (err) throw err;
|
||||
console.log(data);
|
||||
});
|
||||
```
|
||||
|
||||
上面代码中，`readFile`函数的第三个参数，就是回调函数，也就是任务的第二段。等到操作系统返回了`/etc/passwd`这个文件以后，回调函数才会执行。
|
||||
|
||||
一个有趣的问题是，为什么 Node 约定，回调函数的第一个参数，必须是错误对象`err`（如果没有错误，该参数就是`null`）？
|
||||
|
||||
原因是执行分成两段，第一段执行完以后，任务所在的上下文环境就已经结束了。在这以后抛出的错误，原来的上下文环境已经无法捕捉，只能当作参数，传入第二段。
|
||||
|
||||
### Promise
|
||||
|
||||
回调函数本身并没有问题，它的问题出现在多个回调函数嵌套。假定读取`A`文件之后，再读取`B`文件，代码如下。
|
||||
|
||||
```javascript
|
||||
fs.readFile(fileA, 'utf-8', function (err, data) {
|
||||
fs.readFile(fileB, 'utf-8', function (err, data) {
|
||||
// ...
|
||||
});
|
||||
});
|
||||
```
|
||||
|
||||
不难想象，如果依次读取两个以上的文件，就会出现多重嵌套。代码不是纵向发展，而是横向发展，很快就会乱成一团，无法管理。因为多个异步操作形成了强耦合，只要有一个操作需要修改，它的上层回调函数和下层回调函数，可能都要跟着修改。这种情况就称为"回调函数地狱"（callback hell）。
|
||||
|
||||
Promise 对象就是为了解决这个问题而提出的。它不是新的语法功能，而是一种新的写法，允许将回调函数的嵌套，改成链式调用。采用 Promise，连续读取多个文件，写法如下。
|
||||
|
||||
```javascript
|
||||
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`，就是异步任务，因为它分成两段（或多段）执行。
|
||||
|
||||
举例来说，读取文件的协程写法如下。
|
||||
|
||||
```javascript
|
||||
function *asyncJob() {
|
||||
// ...其他代码
|
||||
var f = yield readFile(fileA);
|
||||
// ...其他代码
|
||||
}
|
||||
```
|
||||
|
||||
上面代码的函数`asyncJob`是一个协程，它的奥妙就在其中的`yield`命令。它表示执行到此处，执行权将交给其他协程。也就是说，`yield`命令是异步两个阶段的分界线。
|
||||
|
||||
协程遇到`yield`命令就暂停，等到执行权返回，再从暂停的地方继续往后执行。它的最大优点，就是代码的写法非常像同步操作，如果去除`yield`命令，简直一模一样。
|
||||
|
||||
### 协程的 Generator 函数实现
|
||||
|
||||
Generator 函数是协程在 ES6 的实现，最大特点就是可以交出函数的执行权（即暂停执行）。
|
||||
|
||||
整个 Generator 函数就是一个封装的异步任务，或者说是异步任务的容器。异步操作需要暂停的地方，都用`yield`语句注明。Generator 函数的执行方法如下。
|
||||
|
||||
```javascript
|
||||
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 函数体内输入数据。
|
||||
|
||||
```javascript
|
||||
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 函数内部还可以部署错误处理代码，捕获函数体外抛出的错误。
|
||||
|
||||
```javascript
|
||||
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 函数，执行一个真实的异步任务。
|
||||
|
||||
```javascript
|
||||
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`命令。
|
||||
|
||||
执行这段代码的方法如下。
|
||||
|
||||
```javascript
|
||||
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 函数是自动执行 Generator 函数的一种方法。
|
||||
|
||||
### 参数的求值策略
|
||||
|
||||
Thunk 函数早在上个世纪60年代就诞生了。
|
||||
|
||||
那时，编程语言刚刚起步，计算机学家还在研究，编译器怎么写比较好。一个争论的焦点是"求值策略"，即函数的参数到底应该何时求值。
|
||||
|
||||
```javascript
|
||||
var x = 1;
|
||||
|
||||
function f(m){
|
||||
return m * 2;
|
||||
}
|
||||
|
||||
f(x + 5)
|
||||
```
|
||||
|
||||
上面代码先定义函数`f`，然后向它传入表达式`x + 5`。请问，这个表达式应该何时求值？
|
||||
|
||||
一种意见是"传值调用"（call by value），即在进入函数体之前，就计算`x + 5`的值（等于6），再将这个值传入函数`f`。C语言就采用这种策略。
|
||||
|
||||
```javascript
|
||||
f(x + 5)
|
||||
// 传值调用时，等同于
|
||||
f(6)
|
||||
```
|
||||
|
||||
另一种意见是“传名调用”（call by name），即直接将表达式`x + 5`传入函数体，只在用到它的时候求值。Haskell 语言采用这种策略。
|
||||
|
||||
```javascript
|
||||
f(x + 5)
|
||||
// 传名调用时，等同于
|
||||
(x + 5) * 2
|
||||
```
|
||||
|
||||
传值调用和传名调用，哪一种比较好？
|
||||
|
||||
回答是各有利弊。传值调用比较简单，但是对参数求值的时候，实际上还没用到这个参数，有可能造成性能损失。
|
||||
|
||||
```javascript
|
||||
function f(a, b){
|
||||
return b;
|
||||
}
|
||||
|
||||
f(3 * x * x - 2 * x - 1, x);
|
||||
```
|
||||
|
||||
上面代码中，函数`f`的第一个参数是一个复杂的表达式，但是函数体内根本没用到。对这个参数求值，实际上是不必要的。因此，有一些计算机学家倾向于"传名调用"，即只在执行时求值。
|
||||
|
||||
### Thunk 函数的含义
|
||||
|
||||
编译器的“传名调用”实现，往往是将参数放到一个临时函数之中，再将这个临时函数传入函数体。这个临时函数就叫做 Thunk 函数。
|
||||
|
||||
```javascript
|
||||
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 函数替换的不是表达式，而是多参数函数，将其替换成一个只接受回调函数作为参数的单参数函数。
|
||||
|
||||
```javascript
|
||||
// 正常版本的readFile（多参数版本）
|
||||
fs.readFile(fileName, callback);
|
||||
|
||||
// Thunk版本的readFile（单参数版本）
|
||||
var Thunk = function (fileName) {
|
||||
return function (callback) {
|
||||
return fs.readFile(fileName, callback);
|
||||
};
|
||||
};
|
||||
|
||||
var readFileThunk = Thunk(fileName);
|
||||
readFileThunk(callback);
|
||||
```
|
||||
|
||||
上面代码中，`fs`模块的`readFile`方法是一个多参数函数，两个参数分别为文件名和回调函数。经过转换器处理，它变成了一个单参数函数，只接受回调函数作为参数。这个单参数版本，就叫做 Thunk 函数。
|
||||
|
||||
任何函数，只要参数有回调函数，就能写成 Thunk 函数的形式。下面是一个简单的 Thunk 函数转换器。
|
||||
|
||||
```javascript
|
||||
// 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 函数。
|
||||
|
||||
```javascript
|
||||
var readFileThunk = Thunk(fs.readFile);
|
||||
readFileThunk(fileA)(callback);
|
||||
```
|
||||
|
||||
下面是另一个完整的例子。
|
||||
|
||||
```javascript
|
||||
function f(a, cb) {
|
||||
cb(a);
|
||||
}
|
||||
let ft = Thunk(f);
|
||||
|
||||
let log = console.log.bind(console);
|
||||
ft(1)(log) // 1
|
||||
```
|
||||
|
||||
### Thunkify 模块
|
||||
|
||||
生产环境的转换器，建议使用 Thunkify 模块。
|
||||
|
||||
首先是安装。
|
||||
|
||||
```bash
|
||||
$ npm install thunkify
|
||||
```
|
||||
|
||||
使用方式如下。
|
||||
|
||||
```javascript
|
||||
var thunkify = require('thunkify');
|
||||
var fs = require('fs');
|
||||
|
||||
var read = thunkify(fs.readFile);
|
||||
read('package.json')(function(err, str){
|
||||
// ...
|
||||
});
|
||||
```
|
||||
|
||||
Thunkify 的源码与上一节那个简单的转换器非常像。
|
||||
|
||||
```javascript
|
||||
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 函数相关。请看下面的例子。
|
||||
|
||||
```javascript
|
||||
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 函数可以自动执行。
|
||||
|
||||
```javascript
|
||||
function* gen() {
|
||||
// ...
|
||||
}
|
||||
|
||||
var g = gen();
|
||||
var res = g.next();
|
||||
|
||||
while(!res.done){
|
||||
console.log(res.value);
|
||||
res = g.next();
|
||||
}
|
||||
```
|
||||
|
||||
上面代码中，Generator 函数`gen`会自动执行完所有步骤。
|
||||
|
||||
但是，这不适合异步操作。如果必须保证前一步执行完，才能执行后一步，上面的自动执行就不可行。这时，Thunk 函数就能派上用处。以读取文件为例。下面的 Generator 函数封装了两个异步操作。
|
||||
|
||||
```javascript
|
||||
var fs = require('fs');
|
||||
var thunkify = require('thunkify');
|
||||
var readFileThunk = thunkify(fs.readFile);
|
||||
|
||||
var gen = function* (){
|
||||
var r1 = yield readFileThunk('/etc/fstab');
|
||||
console.log(r1.toString());
|
||||
var r2 = yield readFileThunk('/etc/shells');
|
||||
console.log(r2.toString());
|
||||
};
|
||||
```
|
||||
|
||||
上面代码中，`yield`命令用于将程序的执行权移出 Generator 函数，那么就需要一种方法，将执行权再交还给 Generator 函数。
|
||||
|
||||
这种方法就是 Thunk 函数，因为它可以在回调函数里，将执行权交还给 Generator 函数。为了便于理解，我们先看如何手动执行上面这个 Generator 函数。
|
||||
|
||||
```javascript
|
||||
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 执行器。
|
||||
|
||||
```javascript
|
||||
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 函数。
|
||||
|
||||
```javascript
|
||||
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 模块](https://github.com/tj/co)是著名程序员 TJ Holowaychuk 于2013年6月发布的一个小工具，用于 Generator 函数的自动执行。
|
||||
|
||||
下面是一个 Generator 函数，用于依次读取两个文件。
|
||||
|
||||
```javascript
|
||||
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 函数的执行器。
|
||||
|
||||
```javascript
|
||||
var co = require('co');
|
||||
co(gen);
|
||||
```
|
||||
|
||||
上面代码中，Generator函数只要传入co函数，就会自动执行。
|
||||
|
||||
co函数返回一个Promise对象，因此可以用then方法添加回调函数。
|
||||
|
||||
```javascript
|
||||
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 对象。
|
||||
|
||||
```javascript
|
||||
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 函数。
|
||||
|
||||
```javascript
|
||||
var g = gen();
|
||||
|
||||
g.next().value.then(function(data){
|
||||
g.next(data).value.then(function(data){
|
||||
g.next(data);
|
||||
});
|
||||
});
|
||||
```
|
||||
|
||||
手动执行其实就是用`then`方法，层层添加回调函数。理解了这一点，就可以写出一个自动执行器。
|
||||
|
||||
```javascript
|
||||
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 对象。
|
||||
|
||||
```javascript
|
||||
function co(gen) {
|
||||
var ctx = this;
|
||||
|
||||
return new Promise(function(resolve, reject) {
|
||||
});
|
||||
}
|
||||
```
|
||||
|
||||
在返回的 Promise 对象里面，co 先检查参数`gen`是否为 Generator 函数。如果是，就执行该函数，得到一个内部指针对象；如果不是就返回，并将 Promise 对象的状态改为`resolved`。
|
||||
|
||||
```javascript
|
||||
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`函数。这主要是为了能够捕捉抛出的错误。
|
||||
|
||||
```javascript
|
||||
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`函数，它会反复调用自身。
|
||||
|
||||
```javascript
|
||||
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`语句后面。
|
||||
|
||||
```javascript
|
||||
// 数组的写法
|
||||
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);
|
||||
```
|
||||
|
||||
下面是另一个例子。
|
||||
|
||||
```javascript
|
||||
co(function* () {
|
||||
var values = [n1, n2, n3];
|
||||
yield values.map(somethingAsync);
|
||||
});
|
||||
|
||||
function* somethingAsync(x) {
|
||||
// do something async
|
||||
return y
|
||||
}
|
||||
```
|
||||
|
||||
上面的代码允许并发三个`somethingAsync`异步操作，等到它们全部完成，才会进行下一步。
|
||||
|
||||
@ -1,16 +1,16 @@
|
||||
# Generator 函数
|
||||
# Generator 函数：语法
|
||||
|
||||
## 简介
|
||||
|
||||
### 基本概念
|
||||
|
||||
Generator函数是ES6提供的一种异步编程解决方案，语法行为与传统函数完全不同。本章详细介绍Generator函数的语法和API，它的异步编程应用请看《异步操作》一章。
|
||||
Generator 函数是 ES6 提供的一种异步编程解决方案，语法行为与传统函数完全不同。本章详细介绍Generator 函数的语法和 API，它的异步编程应用请看《Generator 函数：异步操作》一章。
|
||||
|
||||
Generator函数有多种理解角度。从语法上，首先可以把它理解成，Generator函数是一个状态机，封装了多个内部状态。
|
||||
Generator 函数有多种理解角度。从语法上，首先可以把它理解成，Generator 函数是一个状态机，封装了多个内部状态。
|
||||
|
||||
执行Generator函数会返回一个遍历器对象，也就是说，Generator函数除了状态机，还是一个遍历器对象生成函数。返回的遍历器对象，可以依次遍历Generator函数内部的每一个状态。
|
||||
执行 Generator 函数会返回一个遍历器对象，也就是说，Generator 函数除了状态机，还是一个遍历器对象生成函数。返回的遍历器对象，可以依次遍历 Generator 函数内部的每一个状态。
|
||||
|
||||
形式上，Generator函数是一个普通函数，但是有两个特征。一是，`function`关键字与函数名之间有一个星号；二是，函数体内部使用`yield`语句，定义不同的内部状态（yield语句在英语里的意思就是“产出”）。
|
||||
形式上，Generator 函数是一个普通函数，但是有两个特征。一是，`function`关键字与函数名之间有一个星号；二是，函数体内部使用`yield`语句，定义不同的内部状态（`yield`在英语里的意思就是“产出”）。
|
||||
|
||||
```javascript
|
||||
function* helloWorldGenerator() {
|
||||
|
||||
@ -779,7 +779,7 @@ Object.keys(obj)
|
||||
// ["foo", "baz"]
|
||||
```
|
||||
|
||||
ES2017 [引入](https://github.com/tc39/proposal-object-values-entries)了跟`Object.keys`配套的`Object.values`和`Object.entries`，作为遍历一个对象的补充手段。
|
||||
ES2017 [引入](https://github.com/tc39/proposal-object-values-entries)了跟`Object.keys`配套的`Object.values`和`Object.entries`，作为遍历一个对象的补充手段，供`for...of`循环使用。
|
||||
|
||||
```javascript
|
||||
let {keys, values, entries} = Object;
|
||||
@ -1111,7 +1111,7 @@ Object.getOwnPropertyDescriptor(obj, 'p')
|
||||
// }
|
||||
```
|
||||
|
||||
ES7有一个提案，提出了`Object.getOwnPropertyDescriptors`方法，返回指定对象所有自身属性（非继承属性）的描述对象。
|
||||
ES2017 引入了`Object.getOwnPropertyDescriptors`方法，返回指定对象所有自身属性（非继承属性）的描述对象。
|
||||
|
||||
```javascript
|
||||
const obj = {
|
||||
@ -1132,7 +1132,7 @@ Object.getOwnPropertyDescriptors(obj)
|
||||
// configurable: true } }
|
||||
```
|
||||
|
||||
`Object.getOwnPropertyDescriptors`方法返回一个对象，所有原对象的属性名都是该对象的属性名，对应的属性值就是该属性的描述对象。
|
||||
上面代码中，`Object.getOwnPropertyDescriptors`方法返回一个对象，所有原对象的属性名都是该对象的属性名，对应的属性值就是该属性的描述对象。
|
||||
|
||||
该方法的实现非常容易。
|
||||
|
||||
@ -1146,7 +1146,7 @@ function getOwnPropertyDescriptors(obj) {
|
||||
}
|
||||
```
|
||||
|
||||
该方法的提出目的，主要是为了解决`Object.assign()`无法正确拷贝`get`属性和`set`属性的问题。
|
||||
该方法的引入目的，主要是为了解决`Object.assign()`无法正确拷贝`get`属性和`set`属性的问题。
|
||||
|
||||
```javascript
|
||||
const source = {
|
||||
@ -1210,7 +1210,7 @@ const shallowClone = (obj) => Object.create(
|
||||
|
||||
上面代码会克隆对象`obj`。
|
||||
|
||||
另外，`Object.getOwnPropertyDescriptors`方法可以实现，一个对象继承另一个对象。以前，继承另一个对象，常常写成下面这样。
|
||||
另外，`Object.getOwnPropertyDescriptors`方法可以实现一个对象继承另一个对象。以前，继承另一个对象，常常写成下面这样。
|
||||
|
||||
```javascript
|
||||
const obj = {
|
||||
@ -1219,7 +1219,7 @@ const obj = {
|
||||
};
|
||||
```
|
||||
|
||||
ES6规定`__proto__`只有浏览器要部署，其他环境不用部署。如果去除`__proto__`，上面代码就要改成下面这样。
|
||||
ES6 规定`__proto__`只有浏览器要部署，其他环境不用部署。如果去除`__proto__`，上面代码就要改成下面这样。
|
||||
|
||||
```javascript
|
||||
const obj = Object.create(prot);
|
||||
@ -1246,7 +1246,7 @@ const obj = Object.create(
|
||||
);
|
||||
```
|
||||
|
||||
`Object.getOwnPropertyDescriptors`也可以用来实现Mixin（混入）模式。
|
||||
`Object.getOwnPropertyDescriptors`也可以用来实现 Mixin（混入）模式。
|
||||
|
||||
```javascript
|
||||
let mix = (object) => ({
|
||||
@ -1266,3 +1266,4 @@ let d = mix(c).with(a, b);
|
||||
上面代码中，对象`a`和`b`被混入了对象`c`。
|
||||
|
||||
出于完整性的考虑，`Object.getOwnPropertyDescriptors`进入标准以后，还会有`Reflect.getOwnPropertyDescriptors`方法。
|
||||
|
||||
|
||||
@ -1,14 +1,14 @@
|
||||
# Promise对象
|
||||
# Promise 对象
|
||||
|
||||
## Promise的含义
|
||||
## Promise 的含义
|
||||
|
||||
Promise是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。它由社区最早提出和实现，ES6将其写进了语言标准，统一了用法，原生提供了`Promise`对象。
|
||||
Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。它由社区最早提出和实现，ES6将其写进了语言标准，统一了用法，原生提供了`Promise`对象。
|
||||
|
||||
所谓`Promise`，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise是一个对象，从它可以获取异步操作的消息。Promise提供统一的API，各种异步操作都可以用同样的方法进行处理。
|
||||
所谓`Promise`，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。Promise 提供统一的 API，各种异步操作都可以用同样的方法进行处理。
|
||||
|
||||
`Promise`对象有以下两个特点。
|
||||
|
||||
（1）对象的状态不受外界影响。`Promise`对象代表一个异步操作，有三种状态：`Pending`（进行中）、`Resolved`（已完成，又称Fulfilled）和`Rejected`（已失败）。只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。这也是`Promise`这个名字的由来，它的英语意思就是“承诺”，表示其他手段无法改变。
|
||||
（1）对象的状态不受外界影响。`Promise`对象代表一个异步操作，有三种状态：`Pending`（进行中）、`Resolved`（已完成，又称 Fulfilled）和`Rejected`（已失败）。只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。这也是`Promise`这个名字的由来，它的英语意思就是“承诺”，表示其他手段无法改变。
|
||||
|
||||
（2）一旦状态改变，就不会再变，任何时候都可以得到这个结果。`Promise`对象的状态改变，只有两种可能：从`Pending`变为`Resolved`和从`Pending`变为`Rejected`。只要这两种情况发生，状态就凝固了，不会再变了，会一直保持这个结果。就算改变已经发生了，你再对`Promise`对象添加回调函数，也会立即得到这个结果。这与事件（Event）完全不同，事件的特点是，如果你错过了它，再去监听，是得不到结果的。
|
||||
|
||||
@ -16,7 +16,7 @@ Promise是异步编程的一种解决方案，比传统的解决方案——回
|
||||
|
||||
`Promise`也有一些缺点。首先，无法取消`Promise`，一旦新建它就会立即执行，无法中途取消。其次，如果不设置回调函数，`Promise`内部抛出的错误，不会反应到外部。第三，当处于`Pending`状态时，无法得知目前进展到哪一个阶段（刚刚开始还是即将完成）。
|
||||
|
||||
如果某些事件不断地反复发生，一般来说，使用stream模式是比部署`Promise`更好的选择。
|
||||
如果某些事件不断地反复发生，一般来说，使用 stream 模式是比部署`Promise`更好的选择。
|
||||
|
||||
## 基本用法
|
||||
|
||||
|
||||
@ -301,7 +301,7 @@ s.includes('Hello', 6) // false
|
||||
|
||||
## padStart()，padEnd()
|
||||
|
||||
ES7推出了字符串补全长度的功能。如果某个字符串不够指定长度，会在头部或尾部补全。`padStart`用于头部补全，`padEnd`用于尾部补全。
|
||||
ES2017 引入了字符串补全长度的功能。如果某个字符串不够指定长度，会在头部或尾部补全。`padStart()`用于头部补全，`padEnd()`用于尾部补全。
|
||||
|
||||
```javascript
|
||||
'x'.padStart(5, 'ab') // 'ababx'
|
||||
@ -327,7 +327,7 @@ ES7推出了字符串补全长度的功能。如果某个字符串不够指定
|
||||
// '0123456abc'
|
||||
```
|
||||
|
||||
如果省略第二个参数，则会用空格补全长度。
|
||||
如果省略第二个参数，默认使用空格补全长度。
|
||||
|
||||
```javascript
|
||||
'x'.padStart(4) // ' x'
|
||||
|
||||
@ -21,8 +21,9 @@
|
||||
1. [Reflect](#docs/reflect)
|
||||
1. [Promise 对象](#docs/promise)
|
||||
1. [Iterator 和 for...of 循环](#docs/iterator)
|
||||
1. [Generator 函数](#docs/generator)
|
||||
1. [异步操作和 Async 函数](#docs/async)
|
||||
1. [Generator 函数：语法](#docs/generator)
|
||||
1. [Generator 函数：异步操作](#docs/generator-async)
|
||||
1. [async 函数](#docs/async)
|
||||
1. [Class](#docs/class)
|
||||
1. [Decorator](#docs/decorator)
|
||||
1. [Module](#docs/module)
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user