#Javascript异步介绍

前言

image

熟悉前端的同学对JavaScript的第一印象是什么？不论是弱类型、脚本语言、异步、原型...但用过的同学都对一个特性又爱又恨，那就是异步。本文会首先从异步的原理开始，介绍一些异步编程的方法，从jQuery中的异步到Promise、Generator，再到async/wait，一步一步讲解，内容尽量通俗易懂，用最简单的例子。

开发中总是会遇到各种异步问题，今天粗略的说下JS的异步，抛块砖，讲下异步发展，并没有太深入挖掘，本篇幅稍微有点长，需要有点耐心，如果比较了解的同学可以直接跳过，内容有错误或不恰当的地方请不吝指出，欢迎大家指正、交流。

1、异步

1.1 为什么要有异步

在浏览器中，JS是单线程、异步执行的。单线程，就是同一时刻JS引擎只能执行一段代码，浏览器是直接面对用户的，而且往往一个页面会有很多请求，如果所有请求都是同步的，那体验就太糟了，所以请求采用异步，避免用户长时间的等待。

而Node中，“一切皆异步”的思想，更是指出了异步的重要性，目的也是让猿儿们编写高效的程序，不因为请求或DB操作而阻塞了服务。

1.2 异步原理

先来说下同步，同步就是事件1干完，再干事件2，事件1干完之前，事件2只能傻傻的等待。如排队上厕所，前面那个人完事出来你才能进去舒服一下，否则...自己脑补吧，画面太美不敢看。

同步


// doSomething1

var s = Date.now();

for (var i = 0; i < 100000000; i++) {

// ...

}

console.log(Date.now() - s);    // 约330ms

// doSomething2

上面的为同步，在doSomething2开始之前，必须等待350ms才能开始doSomething2，因为浏览器在执行for的时候，干不了别的。

异步，是为了解决“傻傻的等待”的问题，还是上厕所问题，但是这次加了一步，先拿号，然后等待叫号，等轮到你的号通知你之后，直接去厕所就行了，而在这等待期间，你完全可以来两局王者农药，不耽误你干别的。


// 1、异步1

setTimeout(function () {

// doSomething

}, 1000)

// 2、异步2

$.ajax({

url: '/test/data.json',

success: function() {

console.log('success');

}

});

像上面这种不立即执行，而是等待有了结果之后，再去执行的函数，称为callback，即回调函数。

异步的原理就是将callback作为参数传递给异步执行的函数，等有结果之后再去调用callback执行。

1.3 常见异步

开发中常见的异步操作有：

网络请求，如ajax,request
IO操作，如fs.readFile，DB的CRUD
定时函数，如setTimeout, setInterval
事件监听，如$btn.on('click', callback)

1.4 结束语

异步是一开始就有的，但是怎么把异步从回调地狱中解放出来，则是一步一步发展的。jQuery大家都很熟悉，基本是个前端同学都必用过的，下面先说下它中的异步解决方案。

2、jQuery异步解决方案

jQuery中异步很多，本文主要讲述 $.ajax的变化。

2.1 v1.5版本之前的异步

在1.5版本之前，ajax主要是通过回调函数的写法来实现的：


var ajax = $.ajax({

url: '/test/data.json',

success: function() {

console.log('success');

},

err: function() {

console.log('err')

}

})

console.log(ajax); // 返回的是一个XHR对象

这种是传统的callback的写法，单看这一层还好，如果有三层甚至更多，那么会看到代码呈“>”状，一层层的缩进，代码阅读很糟，也不便于维护。

2.2 v1.5版本以及之后的异步

2011年1月31日，jQuery v1.5发布，重写了ajax的API，ajax写法如下：


var ajax = $.ajax('/test/data.json')

.done(function() {

console.log('done');

})

.fail(function() {

console.log('fail');

})

.always(function() {

console.log('finished');

});

console.log(ajax); // 返回的是一个deferred对象

可以看到，这次采用了链式调用的写法，返回的是一个deferred对象，何为deferred对象，请移驾此处：deferred对象。

链式写法的好处，不用把所有请求都丢到callback里，明确了成功就放入done，失败放入fail，如果成功后有很多步骤，可以写很多done，然后链式起来就行了。熟悉Promise的同学是不是觉得有一点熟悉，如果看不出来，那么上面的写法还可以像这么写：


var ajax = $.ajax('/test/data.json')

.then(function() {

console.log('success');

}, function() {

console.log('err');

})

.then(function() {

console.log('success');

}, function() {

console.log('err');

})

就是用then来代替done、fail，then两个参数，第一个是doneCallback，第二个是failCallback。是不是与Promise更像了。

2.3 结束语

在这章节说下jQuery的变化，也是为了说明JS异步发展的一个过程，由callback到链式的写法，jQuery从一开始的callback到之后的then链式调用，其实也为之后的Promise奠定了基础，下面先讲下async的处理方式，然后就轮到Promise。

3、Async.js

讲Promise之前，先说下Async.js，像Promise，它是需要学习成本的，有人不想用Promise，但是多层回调嵌套又确实很恶心人，所有就有了async、then等库的诞生，这些库并没有用到Promise，能以优美的方式去书写异步，只是callback的语法糖，但是也可以一定程度逃离“回调地狱”了。

下面简单介绍下Async，它可以用在browser跟node端，它的方法很多，具体可移驾Github Async.js，挑出几个常用的，看看它的写法。

async.series(tasks, [callback]): 顺序执行数组或集合内的函数，执行完一个就执行下一个，错误可在callback中获得


var async = require('async');

async.series([

function (callback) {

callback(null, 'ok1'); // 为了方便，直接返回字符串

},

function (callback) {

callback(null, 'ok2');

}

], function (err, data) {

console.log(data); // ['ok1', 'ok2']

});

async.parallel(tasks, [callback]): 并行执行数组、集合内的函数


async.parallel([

function (callback) {

callback(null, 'ok1');

},

function (callback) {

callback(null, 'ok2');

}

], function (err, data) {

console.log(data); // ['ok1', 'ok2']

});

async.waterfall(tasks, [callback]): 瀑布流方式，任务依次执行，前一个函数的回调，会作为后一个函数的参数


async.waterfall([

function (callback) {

callback(null, 'ok1', 'ok2');

},

function (arg1, arg2, callback) {

// 此处 arg1='ok1', arg2='ok2'

callback(null, 'ok3');

}

], function (err, data) {

console.log(data); // 'ok3'

});

可以看出，对于连续多个任务或请求，利用async库可以轻易的把他们放到同一级(数组或集合)来执行，避免了callback的多层嵌套。所以这个库很受欢迎，githut的star将近23k，但是如果想顺应时代发展，特别是ES6，甚至ES7，Promise还是有必要学下的，接下来是Promise。

4、Promise

callback一层嵌一层的回调，导致了金字塔问题的出现，也即callhack hell，写个代码都不能愉快的写了。所有新兴事物的快速发展一定是戳中了原来的一些痛点。

在开发者的千呼万唤中，终于，2015年6月份，ES2015规范正式发布，也是JavaScript的20周年，ES6的发布，也标志着JS开始升级为企业级大型应用的开发语言。Promise也正式加入到ES6，成为一个原生对象，可以直接用。

4.1 什么是Promise

Promise是一个拥有then方法的函数或对象，一个Promise对象可以理解为一次将要执行的操作，主要是异步操作，之后可以用一种链式调用的方式来组织代码。目前Promise的规范是Promise/A+规范，核心内容如下：

状态：一个Promise只有3种状态：pending(等待), fulfilled(已完成)或rejected(已拒绝)，且必须在其中状态之一。
状态只能从 pending-->fulfilled，或者 pending-->rejected，不能逆向转换，fulfilled、rejected也不能相互转换。
then方法：一个Promise必须提供一个then方法来获取其值，而且then必须返回一个Promise，以供链式调用。
then方法接收两个可选参数，promise.then(onFulfilled, onRejected)
onFulfilled：pending-->fulfilled时调用，onRejected：pending-->rejected时调用。

图片1

4.2 基本用法

先来看一个fs的异步读取文件的方法：


var fs = require('fs');

var read = function(fileName) {

fs.readFile(fileName, function (err, data) {

if (err) {

console.log(err);

} else {

console.log(data.toString());

}

});

}

然后用Promise对fs.readFile进行封装：


var fs = require('fs');

// readPromise这个方法以后会多次使用

var readPromise = function(fileName) {

// 把fs.readFile用Promise包装一层

var promise = new Promise(function (resolve, reject) {

fs.readFile(fileName, function (err, data) {

if (err) {

reject(err); // 失败就reject出去

} else {

resolve(data.toString()); // 成功就resolve出去

}

});

})

return promise; // 最后返回一个promise对象

}

大家注意看程序中注释的部分，Promise的callback中有两个非常重要的参数：resolve 和 reject。

resolve方法：使Promise对象状态变化 pending-->fulfilled，即等待状态变为已完成，表示成功，resolve方法的参数用于成功之后的操作，此处就是获得的文件的内容。

reject方法：使Promise对象状态变化 pending-->rejected，即等待状态变为已拒绝，表示失败，reject方法的参数用于失败之后的操作，此处就是失败的原因。

通过上小节的规范可以知道，Promise对象都有then方法，所以readPromise方法可以这么用：


readPromise('./test.txt')

.then(function (data) {

console.log(data); // 上面代码中的resolve回的值

}, function (err) {

console.log(err); // 上面代码中的reject回的值

});

then有两个参数，第一个是成功之后的callback，第二个是失败之后的callback，而参数分别是上步包装的resolve与reject函数的参数。

上面还有种写法，就是then只接受一个参数，表示成功之后的操作，后续跟上catch方法，捕获reject的异常：


readPromise('./test.txt')

.then(function (data) {

console.log(data); // 上面代码中的resolve回的值

})

.catch(function (err) {

console.log(err); // 上面代码中的reject回的值

});

上面这种写法更清晰点。

4.3 参数传递

理解Promise的参数传递是很重要的，这样才能得到自己想要的数据。上面已经讲了，resolve的数据会在第一个then接收，reject的数据会在catch接收。因为then返回的还是Promise，所以then可以链式调用，如想对上面的test.txt的数据进行处理，则可以继续then下去：


readPromise('./test.txt')

.then(function (data) {

console.log(data); // resolve回的值

return data; // 此处return的data，将在下个then的参数处获得

})

.then(function (data) {

console.log(data + " 数据已经处理了~"); // 此处的data就是上个then里return回的数据

})

.catch(function (err) {

console.log(err); // 上面代码中的reject回的值

});

then链式操作中返回的值，将会在下个步骤处获得，而如果返回的是一个Promise，那么下个then处获得的就是Promise的第一个then的值。这句话怎么理解，来看个例子，我想读取test1.txt之后，再读取test2.txt，传统callback处理以及Promise处理对比：


// 普通回调，层层嵌套

fs.readFile('./test1.txt',function (err1, data1) {

if (err1) {

console.log(err1);

} else {

console.log(data1);

// 然后再读取第二个文件

fs.readFile('./test1.txt', function (err2, data2) {

if (err2) {

console.log(err2);

} else {

console.log(data2);

}

});

}

});

// Promise方式

var read1 = readPromise('./test1.txt');

var read2 = readPromise('./test2.txt');

read1.then(function (data1) {

console.log(data1); // 此处是test1.txt的内容

return read2; // 此处返回的是read2，一个Promise对象

})

.then(function (data2) {

console.log(data2); // 此处是上一步返回的read2的then，所以打印的是test2.txt的内容

})

对比可以发现，Promise方式更优雅，也更容易看懂，这只是读取2个文件，如果读取三个甚至更多，那用Promise就更方便了，当然如果不需要读取的有依赖关系，则可用Promise对象的all或race方法。

如果想读取test1.txt, text2.txt的内容，读完再做其他操作，则可以如下：


var read1 = readPromise('./test1.txt');

var read2 = readPromise('./test2.txt');

Promise.all([read1, read2])

.then(function (datas) {

console.log(datas[0]); // test1.txt的内容

console.log(datas[1]); // test2.txt的内容

});

如果想读取test1.txt, text2.txt的内容，但是只要有一个返回就可以做其他操作，谁执行的快就用谁，则可以如下：


var read1 = readPromise('./test1.txt');

var read2 = readPromise('./test2.txt');

Promise.race([read1, read2])

.then(function (data) {

console.log(data); // 先读取完那个文件的内容

});

有人说还看到过Promise.resolve，它的作用是把一个thenable对象转换为Promise对象，如下：


// thenable对象，有then属性，且属性值如下

var thenable = {

then: function (resolve, reject) {

resolve('success');

}

}

// 把thenable对象转换为Promise对象

var thenToPromise = Promise.resolve(thenable);

// 然后就可以这么用了

thenToPromise.then(function (data) {

console.log(data); // 'success'

});

4.4 相关库

实际开发中，使用原生的Promise当然可以，不过市面上有现成的第三方库，而且很好用，比较流行的是Q、Bluebird等。他们都可用于浏览器端以及node端，并且可以在不支持Promise的环境中使用，至于用那个，则看个人爱好了，bluebird号称Promise库里最快的，比原生的Promise都快，其实原生的Promise比传统的callback慢不少。

这里介绍Q.js一些基本的用法，引用官网的一个例子，再次体验下传统回调与Promise库之间的对比：


// 传统回调

step1(function (value1) {

    step2(value1, function(value2) {

        step3(value2, function(value3) {

            step4(value3, function(value4) {

                // Do something with value4

            });

        });

    });

});

// 用Q

Q.fcall(promisedStep1)

.then(promisedStep2)

.then(promisedStep3)

.then(promisedStep4)

.then(function (value4) {

    // Do something with value4

})

.catch(function (err) {

    // Handle any err from all above steps

})

.done();

可以看到，传统回调方式也不错嘛，也有美感，but，这只是简写，如果加上各种异常判断，还有其他操作，那么维护起来很麻烦，也容易出错。而用Q，则清晰了很多，一步完成之后继续下一步，比较符合人的思维，这里看到一个Q的用法：Q.fcall，常用的方法有：Q.fcall, Q.nfcall, Q.nfapply, Q.defer, Q.all, Q.any等。用法都放到一段代码里：


var Q = require('q');

var fs = require('fs');

// Q.fcall: 接收函数或defer实例，返回一个Promise对象

var promiseFcall = Q.fcall(function () {

return 'hello';

});

// Q.nfcall: Node function call, 处理callback是这种形式的：function(err, result)，可以直接封装成Promise

var promiseNfcall = Q.nfcall(fs.readFile, './test.txt', 'utf-8');

// Q.nfapply: 与Q.nfcall类似，只是参数不一样，很像js的call与apply用法

var promiseNfapply = Q.nfapply(fs.readFile, ['./test.txt', 'utf-8']);

// Q.defer: 可以定义Promise生成器，如果浏览器不支持Promise，则比较有用，很像原生Promise的写法

var promiseDefer = function(fileName) {

var defer = Q.defer();

fs.readFile(fileName, function (err, data) {

if (err) {

defer.reject(err);

} else {

defer.resolve(data.toString());

}

})

}

// Q.all: 与Promise.all类似

var read1 = Q.nfcall(fs.readFile, './test1.txt', 'utf-8');

var read2 = Q.nfcall(fs.readFile, './test2.txt', 'utf-8');

Q.all([read1, read2], function (data) {

console.log(data[0]);

console.log(data[1]);

});

// Q.any: 与Promise.race类似

Q.any([read1, read2])

.then(function (data) {

    console.log(data);

});

以上只是简单介绍了最基本的用法，具体可以自行去github上看下。

4.5 结束语

到此，Promise差不多介绍完了，当然Promise还有很多用法，就不一一列举了，那么Promise有没有改变callback的本质？并没有，Promise只是换了种对异步的写法，优化了对代码的可读性，其实还是依赖callback，获得的数据，还是在then的callback里获取到的。上面看到需要的数据，还是在callback中获得的，还没有真正像同步那样的写法，如果用Generator配合Promise，则写法就完全不同了，接下来进入Generator。

5、Generator

5.1 协程

介绍Generator前，先讲下协程，协程最初诞生是为了解决低速IO与高速的CPU之间协作问题，协程是指多个线程交互协作，完成异步任务，大概流程如下：

协程A开始运行
执行到某处，暂停，然后执行权交给协程B
一段时间后，协程B交换执行权给协程A
协程A恢复执行

还以读取文件为例，代码表示如下：


function asyncFunction() {

// doSomething1

yield readFile('./test.txt');

// doSomething2

}

上面函数asyncFunction就是一个协程，一开始执行doSomething1，当遇到yield后，自身先暂停，执行权移交给readFile，当readFile执行完之后，执行权又交还回asyncFunction，然后接着执行doSomething2。

5.2 什么是Generator

Generator(生成器)可以说是协程在ES6中的实现，它最大的特点是：可以交出执行权，暂停执行。先看一个简单的Generator写法：


function* gen() {

yield 'hello';

yield 'world';

return 'ok';

}

var g = gen();

g.next(); // {value: "hello", done: false}

g.next(); // {value: "world", done: false}

g.next(); // {value: "ok", done: true}

g.next(); // {value: undefined, done: true}

这看上去像是一个函数，所以也可以称为Generator函数，但是要明白，Generator并不是函数，它与普通函数有几点区别：

以function* 开始，注意这个*
内部有一个 yield 关键字，跟return有点像，不同是yield可以有多个

Generator返回的其实是一个Iterator对象，下面先说下Iterator迭代器。

5.3 Iterator迭代器

在讲Iterator之前，先说下ES6新引入的一个基本类型：Symbol。

ES6之前JS有6个基本数据类型：string, object, null, boolean, undefined, number。现在增加一个：Symbol，表示独一无二的值。

Symbol不能用new关键字，因为是一个原始类型的值，不是对象，所以也不能添加属性，可理解为类似字符串数据类型。它可以接收一个字符串参数，主要是为了控制台显示或转换为字符串时容易区分：


var s1 = Symbol();

var s2 = Symbol();

s1 == s2 // false

s1 = Symbol('foo');

s2 = Symbol('foo');

s1 // Symbol(foo);

typeof s1 // 'symbol'

s1 == s2 // false

Symbol也可以作为对象的属性key来使用：


var obj = {

a: 'foo',

[Symbol.iterator]: 'foo2'

}

console.log(obj); // {a: "foo", Symbol(Symbol.iterator): "foo2"}

Symbol有个iterator属性，指向该对象的默认遍历器方法。在ES6中有些原生就具有[Symbol.iterator]属性，如数组、Set、Map(也是ES6新引进的)、arguments对象等，这些对象有个特点，就是可以用for...of循环遍历：


var arr = ['foo1', 'foo2', 'foo3'];

for (var i of arr) {

console.log(i); // 'foo1' 'foo2' 'foo3' 这里注意i为value，并不是对应的key

}

Iterator对象：具有[Symbol.iterator]属性的数据，都可以生成一个Iterator对象，而怎么使用Iterator对象，有两种方式： next(), for...of。以数组举例：


var arr = ['foo1', 'foo2', 'foo3'];

var it = arr[Symbol.iterator](); // 生成arr的iterator对象

// next

it.next(); // {value: "foo1", done: false}

it.next(); // {value: "foo2", done: false}

it.next(); // {value: "foo3", done: false}

it.next(); // {value: undefined, done: true}, done=true表示获取完成

// for...of，这种用法不会遍历到return的数据

for (var i of it) {

console.log(i); // 'foo1' 'foo2' 'foo3'

}

而Generator，就是天生的Iterator对象，所以才有next()，也可以用for...of遍历，针对一开始的例子，现详细解释一下：


function* gen() {

yield 'hello';

yield 'world';

return 'ok';

}

var g = gen();

g.next(); // {value: "hello", done: false}

g.next(); // {value: "world", done: false}

g.next(); // {value: "ok", done: true}

g.next(); // {value: undefined, done: true}

首先定义Generator gen，注意声明用function*
var g = gen()这步生成Generator对象，但是并没有立即执行代码，处于暂停状态
第一个g.next()会激活状态，开始执行代码，直到遇到第一个yield，此时返回yield之后的数据，再次进入暂停状态
第二个g.next()与之前的类似，最后返回结果，进入暂停
第三个g.next()也是先激活，但是遇到了return，所以就结束了，返回return的数据，已经结束了，此时done=true
第四个g.next(),此时因为已经结束，所以只能返回value=undefined, done=true

注意，每次next返回的数据，都是{value:xxx, done:xxx}格式。

5.4 yield、next

上面其实已经用到yield、next了，这儿再详细说下。

yield* : yield 可以返回一个值或一个表达式，但还可以 yield* 这么用，在Generator里面再套一个Generator：


function* gen() {

yield 'a';

yield 'b';

}

function* gen2() {

yield 'c';

yield* gen();

yield 'd';

}

var g = gen2();

g.next(); // {value: "c", done: false}

g.next(); // {value: "a", done: false}

g.next(); // {value: "b", done: false}

g.next(); // {value: "d", done: true}

next: next也可以向yield传递参数：


function* gen() {

var a = yield 'a';

console.log(a); // 100

var b = yield 'b';

console.log(b); // 200

yield 'c';

}

var g = gen();

g.next(); // {value: "a", done: false}

g.next(100); // {value: "b", done: false}

g.next(200); // {value: "c", done: false}

g.next(100)是将100传递给上一个已经执行完了的yield的变量，请各位自己先看下是否能准确判断a,b的值以及每个next的返回值。

第一个next返回当然是value='a'
第二个next，传递100给a变量，所以console.log(a)打印100，然后next返回的是'b'
第三个next同上，200传递给b变量，打印200，然后next返回'c'

讲了这么多，还没到Generator怎么跟异步联系，马上了，下面先说下Thunk函数，已经怎么把Thunk与异步联系起来。

5.5 Thunk

其实Thunk函数并不是Generator的一部分，这节重在介绍Generator，所以放在此处。

Thunk函数：将多参数函数替换成单参数函数，只接受一个参数，并且参数是回调函数。任何函数，只要含有回调函数，都可以写成Thunk函数形式。

看一个例子，以fs.readFile为例：


// 1、多参数函数

fs.readFile(fileName, calback);

// 2、定义一个fs的thunk转换器

var thunk = function (fileName) {

return function (callback) {

return fs.readFile(fileName, callback);

}

}

// readFileThunk为Thunk函数，用的时候，只传入callback就行

var readFileThunk = thunk(fileName);

readFileThunk(callback);

看着是不是又复杂了...是的，不过现在的复杂是为以后的简单准备的，具体后续会讲。手动写Thunk方法比较麻烦，所以出现了第三方库：thunkify。

thunkify: 封装了thunk转换器，可以简化写法：


var fs = require('fs');

var thunkify = require('thunkify');

var readFile = thunkify(fs.readFile);

var readFileThunk = readFile(fileName);

readFileThunk(callback);

Thunk配合Generator

先看个例子：


var fs = require('fs');

var thunkify = require('thunkify');

var readFile = thunkify(fs.readFile);

var gen = function* () {

var data1 = yield readFile('./test1.txt');

console.log(data1.toString()); // test1.txt的内容

var data2 = yield readFile('./test2.txt');

console.log(data2.toString()); // test2.txt的内容

}

看上面的代码，获取data1, data2跟同步写法是否基本一样？想读取那个文件，直接按顺序写就行，不用callback里获得结果，或者then中获得结果，只是前面多了一个yield关键字，是不是很爽？

上面说过，yield会把程序的执行权移出gen函数，但是怎么交换回来呢？这就是Thunk函数的妙用了，它可以用于Generator函数的自动流程管理。下面是一个基于Thunk函数的Generator执行器：


// 执行器

function run(generator) {

var gen = generator();

// 这个next其实就是Thunk函数的回调函数

function next(err, data) {

var res = gen.next(data); // 类似{value: Thunk函数, done: false}

if (res.done) {

return;

}

res.value(next); // res.value是一个Thunk函数，而参数next就是一个callback

}

next();

}

var gen = function* () {

var data1 = yield readFile('./test1.txt');

var data2 = yield readFile('./test2.txt');

}

// run执行Generator函数

run(gen);

其实，要用Generator解决回调地狱问题，需要首先处理一下调用的函数，使函数正确执行后能够自动执行next方法，并且传递执行完方法后的结果。

Promise配合Generator

yield 后能跟Thunk函数，也可以跟Promise对象，所以Promise也可以配合Generator解决回调地狱问题。下面是一个基于Promise的Generator执行器：


// 执行器

function run(generator) {

var gen = generator();

function go(res) {

// res类似{value: Promise对象, done: false}

if (res.done) {

return res.value;

}

// Promise对象有then方法，两个参数为doneCallback，failCallback

return res.value.then(function (data) {

return go(gen.next(data));

}, function (err) {

return go(err);

})

}

go(gen.next());

}

var gen = function* () {

var data1 = yield readPromise('./test1.txt');

var data2 = yield readPromise('./test2.txt');

}

// run执行Generator函数

run(gen);

每次写生成器函数很麻烦，所以TJ大神写了一个co库，下面介绍。

5.6 co

co库可以自动执行Generator函数，其实就是类似上面的run方法，Generator是一个异步操作容器，自动执行需要交换执行权给Generator，有两种方法可以做到：

回调函数，将异步操作包装成Thunk函数，在回调函数里执行交换执行权
Promise对象，将异步操作包装成Promise对象，用then里执行交换执行权

co库就是将两种执行器包装成一个库，所以使用co的时候，yield后面只能是Thunk函数或Promise对象。co现在返回的是一个Promise对象(之前版本返回的是Thunk函数)，co非常好用，把刚才的代码重新，将会非常简单：


var co = require('co');

var gen = function* () {

var data1 = yield readPromise('./test1.txt');

var data2 = yield readPromise('./test2.txt');

}

// co执行Generator函数

co(gen);

5.7 结束语

Generator终于讲完了，配合Thunk函数或Promise对象，确实比之前的callback或then链式调用“顺畅”了很多，很像同步的写法，已经很符合人的顺序执行的思维了。其实Generator的本质是“暂停”，有了这个，才能让程序到一个地方先暂停，执行异步，然后执行完了再继续执行程序，这样就可以把操作连起来了。

可以看到Generator的异步处理，学习成本比较高，Generator、Thunk、Promise...等，都需要时间去学习，这显然还不够友好，所以在ES7中基于Promise实现了一套异步处理方案：async/await，这个才是最终的方案。

6、async/await

async/await是在ES7中实现的，目前好多浏览器不支持，node从7.0.0开始就支持使用--harmony-async-await来支持此功能，另外babel也已经支持async的transform了，使用的时候引入babel就行。

6.1 基本用法

先介绍下async/await：

基于Promise实现的，不适用于普通的回调函数
非阻塞的
函数声明用async function, 遇到异步用await，且await只能放在async函数中

先看一段使用async/await的代码：


// 定义async函数，注意async关键字

var readAsync = async function() {

var data1 = await readPromise('./test1.txt'); // 注意await关键字

var data2 = await readPromise('./test2.txt');

return 'ok'; // 返回值可以在调用处通过then拿到

}

// 执行

readAsync();

// 或者

readAsync().then(function (data) {

console.log(data); // 'ok'

});

是不是非常简单，无需用co，直接执行就行。需要注意一点，await后只能跟Promise对象、字符串，数值等，不能跟Thunk函数，也暗示Promise可能是解决异步的最终方案。同时，async函数也默认返回的是一个Promise对象，函数最后可以return一个值，最后调用时在then里获取。

6.2 与Generator的对比

上面也看到，async/await与Generator的解决方案很像，区别如下：

声明，async function 代替 function*
await 代替 yield
内置执行器，可以直接运行，不需要co这种第三方库

6.3 结束语

其实async与Generator很像，是因为async相当于把Generator跟执行器进行了包装，是Generator的语法糖，但是也方便了很多，目前很多人认为async就是异步的最终方案。

小结

讲完了，里面可能有些例子不恰当，也参考了官网或别人的一些例子，总之尽量用简单的例子去铺开。

由于浏览器的特殊性，JS只能采用异步解决请求，从而性能也比较好，但是也带了了各种麻烦，所以人们从一开始就寻找它的同步写法，试图摆脱恶心的callback-hell，从一开始callback，到Promise对象，到Generator，再到async，异步方案是越来越好，也越来越优雅，随着ES7的普及，其实直接用async就好，不过技术发展总有一些过程，了解这些过程对我们的眼界扩展以及对这门语音会有更好的认识。

希望讲了这么多能帮助一些同学理解异步，有错误也轻及时指正，谢谢~最后再总览下法中中的几种写法，体验异步发展过程：

callback方式：


fs.readFile('./test1.txt', function (err1, data1) {

fs.readFile('./test2.txt', function (err2, data2) {

fs.readFile('./test2.txt', function (err2, data2) {

});

});

});

Promise方式：


readPromise('./test1.txt', function (data1) {

return readPromise('./test2.txt');

})

.then(function (data2) {

return readPromise('./test3.txt');

})

.then(function (data3) {

});

Generator方式：


var gen = function* () {

var data1 = yield readPromise('./test1.txt');

var data2 = yield readPromise('./test2.txt');

var data3 = yield readPromise('./test3.txt');

}

co(gen);

async/await方式：


var readAsync = async function() {

var data1 = await readPromise('./test1.txt');

var data2 = await readPromise('./test2.txt');

var data3 = await readPromise('./test3.txt');

}

readAsync();

最后编辑于：2019.08.22 16:17:12

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 194,319评论 5赞 459
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 81,801评论 2赞 371
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 141,567评论 0赞 319
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 52,156评论 1赞 263
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 61,019评论 4赞 355
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 46,090评论 1赞 272
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 36,500评论 3赞 381
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 35,192评论 0赞 253
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 39,474评论 1赞 290
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 34,566评论 2赞 309
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 36,338评论 1赞 326
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 32,212评论 3赞 312
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 37,572评论 3赞 298
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 28,890评论 0赞 17
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 30,169评论 1赞 250
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 41,478评论 2赞 341
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 40,661评论 2赞 335