JS之异步发展史

时间：2022-02-11 19:50:38

前言

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

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

  1. 异步

    1. 为什么要有异步

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

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

    2. 异步原理

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

      JS之异步发展史

       
      代码块 同步
        
      // 代码块 同步
// doSomething1
const s = Date.now();
for (let i = 0; i < 100000000; i++) {
    // ...
}
console.log(Date.now() - s);    // 约330ms
// doSomething2

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

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

      // 代码块 异步
// 1、异步1
setTimeout(() => {
    // doSomething
}, 1000)
​
// 2、异步2
$.ajax({
    url: '/test/data.json',
    success: () => {
        console.log('success');
    }
});

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

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

    3. 常见异步

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

      • 网络请求，如 ajax，request

      • IO 操作，如 fs.readFile，DB的CRUD

      • 定时函数，如 setTimeout, setInterval

      • 事件监听，如 $btn.on('click', callback)

    4. 结束语

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

  2. jQuery异步方案

    1. v1.5版本之前的异步

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

      const ajax = $.ajax({
    url: '/test/data.json',
    success: () => {
        console.log('success');
    },
    err: () => {
        console.log('err')
    }
});
console.log(ajax); // 返回的是一个XHR对象

      这是标准的 callback 的写法，每个人都很熟悉，单着一层还好，如果有三层甚至更多层，那么代码会成“>”状，阅读很糟糕，也不便维护。

    2. v1.5+的异步

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

      const ajax = $.ajax('/test/data.json')
    .done(() => {
        console.log('done');
    })
    .fail(() => {
        console.log('fail');
    })
    .always(() => {
        console.log('finished');
    });
console.log(ajax); // 返回的是一个deferred对象

      可以看到，最大的区别，是采用了链式的写法，最终返回的是一个 deferred object（延迟对象），实现了Promise接口，至于什么是deferred对象，请移驾此处：deferred。

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

      const ajax = $.ajax('/test/data.json')
    .then(() => {
        console.log('success');
    }, () => {
        console.log('err');
    })
    .then(()  => {
        console.log('success');
    }, () => {
        console.log('err');
    });

      就是用 then 来代替 done、fail 等状态，then有两个参数，都是回调函数，第一个是 doneCallback，第二个是 failCallback。此时是不是与 Promise 更像了。其实链式写法，也并没有改变层层回调问题，只是发展路上的一个过渡。

    3. 结束语

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

  3. Async.js

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

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

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

      const async = require('async');
async.series([
    (callback) => {
        callback(null, 'ok1'); // 为了方便，直接返回字符串
    },
    (callback) => {
        callback(null, 'ok2');
    }
], (err, data) => {
    console.log(data); // ['ok1', 'ok2']
});

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

      async.parallel([
    (callback) => {
        callback(null, 'ok1');
    },
    (callback) => {
        callback(null, 'ok2');
    }
], (err, data) => {
    console.log(data); // ['ok1', 'ok2']
});

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

    • async.waterfall([
    (callback) => {
        callback(null, 'ok1', 'ok2');
    },
    (arg1, arg2, callback) => {
        // 此处 arg1='ok1', arg2='ok2'
        callback(null, 'ok3');
    }
], (err, data) => {
    console.log(data); // 'ok3'
}); 

      从上面几个例子可以看出，它可以很方便的把多个请求放到同一级去处理(数组或集合中)，而且功能很多，如顺序执行、并行执行、竞速执行等，非常方便。如果用传统的回调函数形式，则要复杂的多，一层层嵌套，难以书写与维护。所以 Async 这个库很受欢迎，现在 github 上的 stars 将近 25k，也能看出火爆程度，大家是多么想逃离回调地狱。

      但是时代在发展，随着 ES6、ES7、ES8 等的发布，Promise 还是有必要了解、学习一下的。

  4. Promise

    callback一层嵌一层的回调，导致了金字塔问题的出现，也即callhack hell，写个代码都不能愉快的写了。所有新兴事物的快速发展一定是戳中了原来的一些痛点。
    在开发者的千呼万唤中，终于，2015年6月份，ES2015规范正式发布，也是JavaScript的20周年，ES6的发布，也标志着JS开始升级为企业级大型应用的开发语言。Promise也正式加入到ES6，成为一个原生对象，可以直接用。

    1. 什么是Promise

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

      1. 状态：一个Promise只有3种状态：pending(等待), fulfilled(已完成)或rejected(已拒绝)，且必须在其中状态之一。

      2. 状态只能从 pending-->fulfilled，或者 pending-->rejected，不能逆向转换，fulfilled、rejected也不能相互转换。

      3. then方法：一个Promise必须提供一个then方法来获取其值，而且then必须返回一个Promise，以供链式调用。

      4. then方法接收两个可选参数，promise.then(onFulfilled, onRejected) - onFulfilled：pending-->fulfilled时调用，onRejected：pending-->rejected时调用。

        JS之异步发展史

    2. 基本用法

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

      const fs = require('fs');
const read = (fileName) => {
    fs.readFile(fileName, (err, data) => {
        if (err) {
            console.log(err);
        } else {
            console.log(data.toString());
        }
    });
}

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

      const fs = require('fs');
// readPromise这个方法以后会多次使用
const readPromise = (fileName) => {
    // 把fs.readFile用Promise包装一层
    const promise = new Promise((resolve, reject) => {
        fs.readFile(fileName, (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((data) => {
    console.log(data); // 上面代码中的resolve回的值
}, (err) => {
    console.log(err); // 上面代码中的reject回的值
});

      then有两个参数，第一个是成功之后的callback，第二个是失败之后的callback，而参数分别是上步包装的resolve与reject函数的参数。
      上面还有种写法，就是then只接受一个参数，表示成功之后的操作，后续跟上catch方法，捕获reject的异常：

      readPromise('./test.txt')
.then((data) => {
    console.log(data); // 上面代码中的resolve回的值
})
.catch((err) => {
    console.log(err); // 上面代码中的reject回的值
});

      上面这种写法更清晰点。

    3. 参数传递

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

      readPromise('./test.txt')
.then((data) => {
    console.log(data); // resolve回的值
    return data; // 此处return的data，将在下个then的参数处获得
})
.then((data) => {
    console.log(data + " 数据已经处理了~"); // 此处的data就是上个then里return回的数据
})
.catch((err) => {
    console.log(err); // 上面代码中的reject回的值
});

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

      // 普通回调，层层嵌套
fs.readFile('./test1.txt',(err1, data1) => {
    if (err1) {
        console.log(err1);
    } else {
        console.log(data1);
        // 然后再读取第二个文件
        fs.readFile('./test1.txt', (err2, data2) => {
            if (err2) {
                console.log(err2);
            } else {
                console.log(data2);
            }
        });
    }
});
​
// Promise方式
const read1 = readPromise('./test1.txt');
const read2 = readPromise('./test2.txt');
read1.then((data1) => {
    console.log(data1); // 此处是test1.txt的内容
    return read2; // 此处返回的是read2，一个Promise对象
})
.then((data2) => {
    console.log(data2); // 此处是上一步返回的read2的then，所以打印的是test2.txt的内容
})

      对比可以发现，Promise方式更优雅，也更容易看懂，这只是读取2个文件，如果读取三个甚至更多，那用Promise就更方便了，当然如果不需要读取的有依赖关系，则可用Promise对象的all或race方法。
      如果想读取test1.txt, text2.txt的内容，读完再做其他操作，则可以如下：

      const read1 = readPromise('./test1.txt');
const read2 = readPromise('./test2.txt');
Promise.all([read1, read2])
.then((datas) => {
    console.log(datas[0]); // test1.txt的内容
    console.log(datas[1]); // test2.txt的内容
});

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

      const read1 = readPromise('./test1.txt');
const read2 = readPromise('./test2.txt');
Promise.race([read1, read2])
.then((data) => {
    console.log(data); // 先读取完那个文件的内容
});

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

      // thenable对象，有then属性，且属性值如下
const thenable = {
    then: (resolve, reject) => {
        resolve('success');
    }
}
// 把thenable对象转换为Promise对象
const thenToPromise = Promise.resolve(thenable);
// 然后就可以这么用了
thenToPromise.then((data) => {
    console.log(data); // 'success'
});

    4. 相关库

      实际开发中，使用原生的Promise当然可以，不过市面上有现成的第三方库，而且很好用，比较流行的是Q、Bluebird等。他们都可用于浏览器端以及node端，并且可以在不支持Promise的环境中使用，至于用那个，则看个人爱好了，bluebird号称Promise库里最快的，比原生的Promise都快，其实原生的Promise比传统的callback慢不少。
      这里介绍Q.js一些基本的用法，引用官网的一个例子，再次体验下传统回调与Promise库之间的对比：

      // 传统回调
step1((value1) => {
    step2(value1, (value2) => {
        step3(value2, (value3) => {
            step4(value3, (value4) => {
                // Do something with value4
            });
        });
    });
});
​
// 用Q
Q.fcall(promisedStep1)
.then(promisedStep2)
.then(promisedStep3)
.then(promisedStep4)
.then((value4) => {
    // Do something with value4
})
.catch((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等。用法都放到一段代码里：

      const Q = require('q');
const fs = require('fs');
​
// Q.fcall: 接收函数或defer实例，返回一个Promise对象
const promiseFcall = Q.fcall(() => {
    return 'hello';
});
​
// Q.nfcall: Node function call, 处理callback是这种形式的：function(err, result)，可以直接封装成Promise
const promiseNfcall = Q.nfcall(fs.readFile, './test.txt', 'utf-8');
​
// Q.nfapply: 与Q.nfcall类似，只是参数不一样，很像js的call与apply用法
const promiseNfapply = Q.nfapply(fs.readFile, ['./test.txt', 'utf-8']);
​
// Q.defer: 可以定义Promise生成器，如果浏览器不支持Promise，则比较有用，很像原生Promise的写法
const promiseDefer = (fileName) => {
    const defer = Q.defer();
    fs.readFile(fileName, (err, data) => {
        if (err) {
            defer.reject(err);
        } else {
            defer.resolve(data.toString());
        }
    })
}
​
// Q.all: 与Promise.all类似
const read1 = Q.nfcall(fs.readFile, './test1.txt', 'utf-8');
const read2 = Q.nfcall(fs.readFile, './test2.txt', 'utf-8');
Q.all([read1, read2], (data) => {
    console.log(data[0]);
    console.log(data[1]);
});
​
// Q.any: 与Promise.race类似
Q.any([read1, read2])
.then((data) => {
    console.log(data);
});

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

    5. 结束语

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

  5. Generator

    1. 协程（非携程）

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

      1. 协程A开始运行

      2. 执行到某处，暂停，然后执行权交给协程B

      3. 一段时间后，协程B交换执行权给协程A

      4. 协程A恢复执行

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

      function asyncFunction() {
    // doSomething1
    yield readFile('./test.txt');
    // doSomething2
}

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

    2. 什么是Generator

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

      function* gen() {
    yield 'hello';
    yield 'world';
    return 'ok';
}
const 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迭代器。

    3. Iterator迭代器

      在讲Iterator之前，先说下ES6新引入的一个基本类型：Symbol。
      ES6之前JS有6个基本数据类型：string, object, null, boolean, undefined, number。现在增加一个：Symbol，表示独一无二的值。
      Symbol不能用new关键字，因为是一个原始类型的值，不是对象，所以也不能添加属性，可理解为类似字符串数据类型。它可以接收一个字符串参数，主要是为了控制台显示或转换为字符串时容易区分：

      let s1 = Symbol();
let s2 = Symbol();
s1 == s2 // false
​
s1 = Symbol('foo');
s2 = Symbol('foo');
​
s1 // Symbol(foo);
typeof s1 // 'symbol'
s1 == s2 // false

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

      const 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循环遍历：

      const arr = ['foo1', 'foo2', 'foo3'];
for (let i of arr) {
    console.log(i); // 'foo1' 'foo2' 'foo3' 这里注意i为value，并不是对应的key
}

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

      const arr = ['foo1', 'foo2', 'foo3'];
const 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 (let i of it) {
    console.log(i); // 'foo1' 'foo2' 'foo3'
}

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

      function* gen() {
    yield 'hello';
    yield 'world';
    return 'ok';
}
const 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*

      • const 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}格式。

    4. yield、next

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

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

        function* gen() {
    yield 'a';
    yield 'b';
}
function* gen2() {
    yield 'c';
    yield* gen();
    yield 'd';
}
const g = gen2();
g.next(); // {value: "c", done: false}
g.next(); // {value: "a", done: false}
g.next(); // {value: "b", done: false}

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

        function* gen() {
    const a = yield 'a';
    console.log(a); // 100
    const b = yield 'b';
    console.log(b); // 200
    yield 'c';
}
const 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. Thunk

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

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

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

      // 1、多参数函数
fs.readFile(fileName, calback);
​
// 2、定义一个fs的thunk转换器
const thunk = (fileName) => {
    return (callback) => {
        return fs.readFile(fileName, callback);
    }
}
// readFileThunk为Thunk函数，用的时候，只传入callback就行
const readFileThunk = thunk(fileName);
readFileThunk(callback);

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

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

        const fs = require('fs');
const thunkify = require('thunkify');
​
const readFile = thunkify(fs.readFile);
const readFileThunk = readFile(fileName);
readFileThunk(callback);

      • Thunk配合Generator

        先看个例子：

        const fs = require('fs');
const thunkify = require('thunkify');
​
const readFile = thunkify(fs.readFile);
const gen = function* () {
    const data1 = yield readFile('./test1.txt');
    console.log(data1.toString()); // test1.txt的内容
    const 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) {
    const gen = generator();
    // 这个next其实就是Thunk函数的回调函数
    function next(err, data) {
        const res = gen.next(data); // 类似{value: Thunk函数, done: false}
        if (res.done) {
            return;
        }
        res.value(next); // res.value是一个Thunk函数，而参数next就是一个callback
    }
    next();
}
​
const gen = function* () {
    const data1 = yield readFile('./test1.txt');
    const data2 = yield readFile('./test2.txt');
}
​
// run执行Generator函数
run(gen);

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

      • Promise配合Generator

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

        // 执行器
function run(generator) {
    const gen = generator();
    function go(res) {
        // res类似{value: Promise对象, done: false}
        if (res.done) {
            return res.value;
        }
        // Promise对象有then方法，两个参数为doneCallback，failCallback
        return res.value.then((data) => {
            return go(gen.next(data));
        }, (err) => {
            return go(err);
        })
    }
    go(gen.next());
}
​
const gen = function* () {
    const data1 = yield readPromise('./test1.txt');
    const data2 = yield readPromise('./test2.txt');
}
​
// run执行Generator函数
run(gen);

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

    6. co

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

      • 回调函数，将异步操作包装成Thunk函数，在回调函数里执行交换执行权

      • Promise对象，将异步操作包装成Promise对象，用then里执行交换执行权

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

      const co = require('co');
​
const gen = function* () {
    const data1 = yield readPromise('./test1.txt');
    const data2 = yield readPromise('./test2.txt');
}
​
// co执行Generator函数
co(gen);

    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就行。

    1. 基本用法

      先介绍下async/await：

      • 基于Promise实现的，不适用于普通的回调函数

      • 非阻塞的

      • 函数声明用async function, 遇到异步用await，且await只能放在async函数中

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

      // 定义async函数，注意async关键字
const readAsync = async function() {
    const data1 = await readPromise('./test1.txt'); // 注意await关键字
    const data2 = await readPromise('./test2.txt');
    return 'ok'; // 返回值可以在调用处通过then拿到
}
​
// 执行
readAsync();
// 或者
readAsync().then((data) => {
    console.log(data); // 'ok'
});

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

    2. 与Generator的对比

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

      • 声明，async function 代替 function*

      • await 代替 yield

      • 内置执行器，可以直接运行，不需要co这种第三方库

    3. 结束语

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

  7. 小结

    讲完了，里面可能有些例子不恰当，也参考了官网或别人的一些例子，总之尽量用简单的例子去铺开。
    由于浏览器的特殊性，JS只能采用异步解决请求，从而性能也比较好，但是也带了了各种麻烦，所以人们从一开始就寻找它的同步写法，试图摆脱恶心的callback-hell，从一开始callback，到Promise对象，到Generator，再到async，异步方案是越来越好，也越来越优雅，随着ES7的普及，其实直接用async就好，不过技术发展总有一些过程，了解这些过程对我们的眼界扩展以及对这门语音会有更好的认识。
    希望讲了这么多能帮助一些同学理解异步，有错误也轻及时指正，最后再总览下法中中的几种写法，体验异步发展过程：

    callback方式：

    fs.readFile('./test1.txt', (err1, data1) => {
    fs.readFile('./test2.txt', (err2, data2) => {
        fs.readFile('./test2.txt', (err2, data2) => {
        });
    });
});

    Promise方式：

    readPromise('./test1.txt', (data1) => {
    return readPromise('./test2.txt');
})
.then((data2) => {
    return readPromise('./test3.txt');
})
.then((data3) => {
});

    Generator方式：

    const gen = function* () {
    const data1 = yield readPromise('./test1.txt');
    const data2 = yield readPromise('./test2.txt');
    const data3 = yield readPromise('./test3.txt');
}
co(gen);

    async/await方式：

    const readAsync = async function() {
    const data1 = await readPromise('./test1.txt');
    const data2 = await readPromise('./test2.txt');
    const data3 = await readPromise('./test3.txt');
}
readAsync();

    　　

标签：

相关文章