前端基础进阶（七） ：异步编程的六种方案

头像
guona
    阅读 10 分钟

    总结：

    js异步编程的进化史
    1. 回调=>优点：是简单、容易理解和实现。缺点：容易产生回调地狱
    2. 事件监听=>优点：比较容易理解，可以绑定多个事件，每个事件可以指定多个回调函数，而且可以"去耦合"，有利于实现模块化。缺点：个程序都要变成事件驱动型，运行流程会变得很不清晰
    3. 发布订阅
    4. promise=>为了解决回调地狱，缺点：无法取消promise,错误需要通过回调函数捕获
    5. generator/yield=>自我认为是为了解决promise代码一旦执行无法终止，通过yield可暂停函数，next()可启动函数，缺点：需要手动的去执行next()方法，手动迭代Generator函数很麻烦
    6. async/await=>将 Generator 函数和自动执行器，包装在一个函数里

    一、回调函数

    回调函数是异步操作最基本的方法。以下代码就是一个回调函数的例子：

    var func1 = function (callback) {
console.log('我是主函数1')
setTimeout(()=> {
console.log('我是异步主函数1')
callback && callback();
console.log('我是异步主函数2')
        }, 3000);
console.log('我是主函数2')

    }
func1(()=> {
console.log('我是回调函数')
    })
//输出结果依次为：
//我是主函数1
//我是主函数2
//1
//我是异步主函数1
//我是回调函数
//我是异步主函数2

    但是回调函数有一个致命的弱点，就是容易写出回调地狱（Callback hell）。假设多个请求存在依赖性，你可能就会写出如下代码：

        setTimeout(function (name) {
        var catList = name + ',';
        setTimeout(function (name) {
            catList += name + ',';
            setTimeout(function (name) {
                catList += name + ',';
                setTimeout(function (name) {
                    catList += name + ',';
                    setTimeout(function (name) {
                        catList += name;
                        console.log(catList);
                    }, 1, 'Lion');
                }, 1, 'Snow Leopard');
            }, 1, 'Lynx');
        }, 1, 'Jaguar');
    }, 1, 'Panther');
    //输出结果为：
    //Panther,Jaguar,Lynx,Snow Leopard,Lion

    回调函数的优点是简单、容易理解和实现，缺点是不利于代码的阅读和维护，各个部分之间高度耦合，使得程序结构混乱、流程难以追踪（尤其是多个回调函数嵌套的情况），而且每个任务只能指定一个回调函数。此外它不能使用 try catch 捕获错误，不能直接 return。

    回调函数实例：

       getCategaryList(type, cb) {
        if (type == 1) {
            this.$api.contactCompany.list({
                pageNum: 1,
                pageSize: 200,
                type: 1
            }).then(res => {
                cb(res.data.list)
            }).catch(err => {})
        } else if (type == 2) {
            this.$api.personnel.userList({
                pageNumber: 1,
                pageSize: 200,
            }).then(res => {
                cb(res.data.list)
            }).catch(err => {})
        } else if (type == 3) {
            this.$api.contactCompany.list({
                pageNum: 1,
                pageSize: 200,
                type: 0
            }).then(res => {
                cb(res.data.list)
            }).catch(err => {})
        } else {
            this.$refs.collapsedTree.showCollapse()
        }
    }
    payTypeChange(params) {
        this.getCategaryList(params, res => {
            this.payTypeList = res
        })
    }

    二、事件监听

    这种方式下，异步任务的执行不取决于代码的顺序，而取决于某个事件是否发生。

    下面是两个函数f1和f2，编程的意图是f2必须等到f1执行完成，才能执行。首先，为f1绑定一个事件（这里采用的jQuery的写法）

    f1.on('done', f2);

    上面这行代码的意思是，当f1发生done事件，就执行f2。然后，对f1进行改写：

    function f1() {
  setTimeout(function () {
    // ...
    f1.trigger('done');
  }, 1000);
}

    上面代码中，f1.trigger('done')表示，执行完成后，立即触发done事件，从而开始执行f2。

    这种方法的优点是比较容易理解，可以绑定多个事件，每个事件可以指定多个回调函数，而且可以"去耦合"，有利于实现模块化。缺点是整个程序都要变成事件驱动型，运行流程会变得很不清晰。阅读代码的时候，很难看出主流程。

    三、发布订阅

    我们假定，存在一个"信号中心"，某个任务执行完成，就向信号中心"发布"（publish）一个信号，其他任务可以向信号中心"订阅"（subscribe）这个信号，从而知道什么时候自己可以开始执行。这就叫做"发布/订阅模式"（publish-subscribe pattern），又称"观察者模式"（observer pattern）。

    首先，f2向信号中心jQuery订阅done信号。

    jQuery.subscribe('done', f2);

    然后，f1进行如下改写：

    function f1() {
  setTimeout(function () {
    // ...
    jQuery.publish('done');
  }, 1000);
}

    上面代码中，jQuery.publish('done')的意思是，f1执行完成后，向信号中心jQuery发布done信号，从而引发f2的执行。
    f2完成执行后，可以取消订阅（unsubscribe）

    jQuery.unsubscribe('done', f2);

    这种方法的性质与“事件监听”类似，但是明显优于后者。因为可以通过查看“消息中心”，了解存在多少信号、每个信号有多少订阅者，从而监控程序的运行。

    四、Promise

    基本定义：

    所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。

    Promise对象有以下两个特点。

    1. 对象的状态不受外界影响。Promise对象代表一个异步操作，有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。这也是Promise这个名字的由来，它的英语意思就是“承诺”，表示其他手段无法改变。
    2. 一旦状态改变，就不会再变，任何时候都可以得到这个结果。Promise对象的状态改变，只有两种可能：从pending变为fulfilled和从pending变为rejected。只要这两种情况发生，状态就凝固了，不会再变了，会一直保持这个结果，这时就称为 resolved（已定型）。如果改变已经发生了，你再对Promise对象添加回调函数，也会立即得到这个结果。这与事件（Event）完全不同，事件的特点是，如果你错过了它，再去监听，是得不到结果的。

    Promise的优点

    1. 有了Promise对象，就可以将异步操作以同步操作的流程表达出来，避免了层层嵌套的回调函数。
    2. Promise对象提供统一的接口，使得控制异步操作更加容易。

    Promise的缺点

    1. 无法取消Promise，一旦新建它就会立即执行，无法中途取消。
    2. 如果不设置回调函数，Promise内部抛出的错误，不会反应到外部。
    3. 当处于pending状态时，无法得知目前进展到哪一个阶段（刚刚开始还是即将完成）。
    基本用法
    基本例子：
    function timeout(ms) {
  return new Promise((resolve, reject) => {
    setTimeout(resolve, ms, 'done');
  });
}

timeout(100).then((value) => {
  console.log(value);
});

    上面代码中，timeout方法返回一个Promise实例，表示一段时间以后才会发生的结果。过了指定的时间（ms参数）以后，Promise实例的状态变为resolved，就会触发then方法绑定的回调函数。

    基本实例：
        groupChange(value) {
        this.getChildList(0, value).then(res => {
            this.companyData = res
        })
    }
    getChildList(type, id) {
        return new Promise((resolve, reject) => {
            this.$api.announce.getChildList({
                type,
                id
            }).then(res => {
                resolve(res.data)
            })
        })
    }
    执行顺序：

    Promise 新建后就会立即执行。

    let promise = new Promise(function(resolve, reject) {
  console.log('Promise');
  resolve();
});

promise.then(function() {
  console.log('resolved.');
});

console.log('Hi!');

// Promise
// Hi!
// resolved

    上面代码中，Promise 新建后立即执行，所以首先输出的是Promise。然后，then方法指定的回调函数，将在当前脚本所有同步任务执行完才会执行，所以resolved最后输出

    调用resolve或reject并不会终结 Promise 的参数函数的执行。

    new Promise((resolve, reject) => {
  resolve(1);
  console.log(2);
}).then(r => {
  console.log(r);
});
// 2
// 1

    上面代码中，调用resolve(1)以后，后面的console.log(2)还是会执行，并且会首先打印出来。这是因为立即 resolved 的 Promise 是在本轮事件循环的末尾执行，总是晚于本轮循环的同步任务。

    一般来说，调用resolve或reject以后，Promise 的使命就完成了，后继操作应该放到then方法里面，而不应该直接写在resolve或reject的后面。所以，最好在它们前面加上return语句，这样就不会有意外。

    new Promise((resolve, reject) => {
  return resolve(1);
  // 后面的语句不会执行
  console.log(2);
})
    特殊用法：

    一个异步操作的结果是返回另一个异步操作。(暂时不知道实际项目怎么用)

       const p1 = new Promise(function (resolve, reject) {
        setTimeout(() => resolve('123'), 3000)
    })
    const p2 = new Promise(function (resolve, reject) {
        setTimeout(() => resolve(p1), 1000)
    })
    p2.then(result => console.log(result)).catch(error => console.log(error))
    //result结果为123

    有若干个异步任务，需要先做任务1，如果成功后再做任务2，任何任务失败则不再继续并执行错误处理函数。要串行执行这样的异步任务，不用Promise需要写一层一层的嵌套代码。有了Promise，我们只需要简单地写

    
    function multiply(input) {
        return new Promise(function (resolve, reject) {
            console.log('calculating ' + input + ' x ' + input + '...');
            setTimeout(resolve, 500, input * input);
        });
    }

    // 0.5秒后返回input+input的计算结果:
    function add(input) {
        return new Promise(function (resolve, reject) {
            console.log('calculating ' + input + ' + ' + input + '...');
            setTimeout(resolve, 500, input + input);
        });
    }

    var p = new Promise(function (resolve, reject) {
        console.log('start new Promise...');
        resolve(123);
    });

    p.then(multiply)
        .then(add)
        .then(multiply)
        .then(add)
        .then(function (result) {
            console.log('Got value: ' + result);
        });
       //返回结果为：
       //start new Promise...
       //calculating 123 x 123...
      // calculating 15129 + 15129...
      // calculating 30258 x 30258...
     // calculating 915546564 + 915546564...
     // Got value: 1831093128
    promise其他方法：

    promise.try:
    实际开发中，经常遇到一种情况：不知道或者不想区分，函数f是同步函数还是异步操作，但是想用 Promise 来处理它。因为这样就可以不管f是否包含异步操作，都用then方法指定下一步流程，用catch方法处理f抛出的错误。一般就会采用下面的写法。

    Promise.resolve().then(f)

    上面的写法有一个缺点，就是如果f是同步函数，那么它会在本轮事件循环的末尾执行。(事件轮询机制中，promise.then属于微任务)

    const f = () => console.log('now');
Promise.resolve().then(f);
console.log('next');
// next
// now

    上面代码中，函数f是同步的，但是用 Promise 包装了以后，就变成异步执行了。

    那么有没有一种方法，让同步函数同步执行，异步函数异步执行，并且让它们具有统一的 API 呢？回答是可以的，并且还有两种写法。

    第一种写法是用async函数来写。

    const f = () => console.log('now');
(async () => f())();
console.log('next');
// now
// next

    上面代码中，第二行是一个立即执行的匿名函数，会立即执行里面的async函数，因此如果f是同步的，就会得到同步的结果（因为事件轮询机制中，async.await:先将await的结果打印出来，await后面的任务类似于promise放入微任务）；如果f是异步的，就可以用then指定下一步，就像下面的写法。

    第二种写法是使用new Promise()。

    const f = () => console.log('now');
(
  () => new Promise(
    resolve => resolve(f())
  )
)();
console.log('next');
// now
// next

    上面代码也是使用立即执行的匿名函数，执行new Promise()。这种情况下，同步函数也是同步执行的。

    第二种写法是使用promise.try。

    const f = () => console.log('now');
Promise.try(f);
console.log('next');
// now
// next

    promise.then:
    promise.catch:
    promise.finally:finally方法用于指定不管 Promise 对象最后状态如何，都会执行的操作。该方法是 ES2018 引入标准的。
    promise.all:Promise.all()方法用于将多个 Promise 实例，包装成一个新的 Promise 实例。
    promise.allSettled:Promise.allSettled()方法接受一组 Promise 实例作为参数，包装成一个新的 Promise 实例。只有等到所有这些参数实例都返回结果，不管是fulfilled还是rejected，包装实例才会结束。该方法由ES2020引入。
    promise.race:Promise.race()方法同样是将多个 Promise 实例，包装成一个新的 Promise 实例。
    promise.any:Promise.any()方法接受一组 Promise 实例作为参数，包装成一个新的 Promise 实例。只要参数实例有一个变成fulfilled状态，包装实例就会变成fulfilled状态；如果所有参数实例都变成rejected状态，包装实例就会变成rejected状态。该方法目前是一个第三阶段的提案。
    promise.resolve:有时需要将现有对象转为 Promise 对象，Promise.resolve()方法就起到这个作用。

    Promise.resolve('foo')
// 等价于
new Promise(resolve => resolve('foo'))

    promise.reject:Promise.reject(reason)方法也会返回一个新的 Promise 实例，该实例的状态为rejected。

    五、Generator

    基本定义

    Generator 函数有多种理解角度。

    语法上，首先可以把它理解成，Generator 函数是一个状态机，封装了多个内部状态。
    执行 Generator 函数会返回一个遍历器对象，也就是说，Generator 函数除了状态机，还是一个遍历器对象生成函数。返回的遍历器对象，可以依次遍历 Generator 函数内部的每一个状态。

    形式上，Generator 函数是一个普通函数，但是有两个特征。一是，function关键字与函数名之间有一个星号；二是，函数体内部使用yield表达式，定义不同的内部状态（yield在英语里的意思就是“产出”）。

    function* helloWorldGenerator() {
  yield 'hello';
  yield 'world';
  return 'ending';
}

var hw = helloWorldGenerator();

    上面代码定义了一个 Generator 函数helloWorldGenerator，它内部有两个yield表达式（hello和world），即该函数有三个状态：hello，world 和 return 语句（结束执行）。

    然后，Generator 函数的调用方法与普通函数一样，也是在函数名后面加上一对圆括号。不同的是，调用 Generator 函数后，该函数并不执行，返回的也不是函数运行结果，而是一个指向内部状态的指针对象，也就是上一章介绍的遍历器对象（Iterator Object）。

    下一步，必须调用遍历器对象的next方法，使得指针移向下一个状态。也就是说，每次调用next方法，内部指针就从函数头部或上一次停下来的地方开始执行，直到遇到下一个yield表达式（或return语句）为止。换言之，Generator 函数是分段执行的，yield表达式是暂停执行的标记，而next方法可以恢复执行。

    hw.next()
// { value: 'hello', done: false }

hw.next()
// { value: 'world', done: false }

hw.next()
// { value: 'ending', done: true }

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

    上面代码一共调用了四次next方法。

    第一次调用，Generator 函数开始执行，直到遇到第一个yield表达式为止。next方法返回一个对象，它的value属性就是当前yield表达式的值hello，done属性的值false，表示遍历还没有结束。

    第二次调用，Generator 函数从上次yield表达式停下的地方，一直执行到下一个yield表达式。next方法返回的对象的value属性就是当前yield表达式的值world，done属性的值false，表示遍历还没有结束。

    第三次调用，Generator 函数从上次yield表达式停下的地方，一直执行到return语句（如果没有return语句，就执行到函数结束）。next方法返回的对象的value属性，就是紧跟在return语句后面的表达式的值（如果没有return语句，则value属性的值为undefined），done属性的值true，表示遍历已经结束。

    第四次调用，此时 Generator 函数已经运行完毕，next方法返回对象的value属性为undefined，done属性为true。以后再调用next方法，返回的都是这个值。

    总结一下，调用 Generator 函数，返回一个遍历器对象，代表 Generator 函数的内部指针。以后，每次调用遍历器对象的next方法，就会返回一个有着value和done两个属性的对象。value属性表示当前的内部状态的值，是yield表达式后面那个表达式的值；done属性是一个布尔值，表示是否遍历结束。

    重点

    1. for...of循环一次性依次执行所有任务的做法只能用于所有步骤都是同步操作的情况，不能有异步操作的步骤。
    2. yield表达式本身没有返回值，或者说总是返回undefined。next方法可以带一个参数，该参数就会被当作上一个yield表达式的返回值。
    3. 调用 Generator 函数后，该函数并不执行，必须调用遍历器对象的next方法，才会执行

    其他详见es6入门

    javascript
    guona
    54 声望11 粉丝
    « 上一篇
    前端基础进阶（六） ：ajax与axios
    下一篇 »
    前端基础进阶（八） ：事件轮询机制

    引用和评论

    推荐阅读
    头像
    前端基础进阶（三十一）：JavaScript 执行上下文和执行栈

    guona阅读 796

    头像
    腾讯新闻中心首页改版啦

    小蚊酱赞 11阅读 8.7k评论 7

    头像
    前端如何入门 Go 语言

    robin赞 25阅读 7.2k评论 8

    头像
    前站 - 前端导航，搜索社区，阅读文章，提升技术

    bestvist赞 25阅读 13.7k评论 3

    头像
    前端开发工具

    寒青赞 15阅读 4.2k

    头像
    100个React最佳实践小技巧

    夕水赞 13阅读 1.3k评论 3

    头像
    开发插件集合

    寒青赞 11阅读 2.9k

    0 条评论
    得票最新