ES6/7 异步编程学习笔记

前言

在ES6的异步函数出现之前，Js实现异步编程只有settimeout、事件监听、回调函数等几种方法

 

settTmeout

这种方法常用于定时器与动画的功能，因为其本质上其实是浏览器的WebAPIs功能，因此与主线程并不同，当延时方法到达触发条件时，方法被添加到用于回调的任务队列，只要执行引擎栈中的代码执行完毕，主线程就会去读取任务队列，依次执行那些满足触发条件的回调函数。所以其等待时间在某些情况下往往不是那么准备，这一方面推荐可以看看《你不知道的js》这方面的章节。

 

事件监听

这一个方法其实在以jq为例的框架中比较常见，例如：a.on('click',function(){...})

优点：比较容易理解，可以绑定多个事件，每个事件可以指定多个回调函数，而且可以”去耦合”，有利于实现模块化。 

缺点：整个程序都要变成事件驱动型，运行流程会变得很不清晰。

 

回调函数

所谓回调函数，就是把任务的第二段单独写在一个函数里面，等到重新执行这个任务的时候，就直接调用这个函数。

其实回调函数本身并没有什么问题，存在问题的是在很多情况下可能需要许多的回调函数去嵌套，这个时候就是所说的“回调地狱”

 

ES6/7: Promise、Generator、async/await

我对于Promise的认识就是将回调函数进行了优化以及封装，把回调嵌套的情况解决了，使用了链式代替，并增加了状态的管理，通过状态传递来保证回调的正确引用。简单举个栗子：

fun1()
.then(function(data){
    console.log(data);
    return fun2();
})
.then(function(data){
    console.log(data);
    return fun3();
})
.then(function(data){
    console.log(data);
});

其中fun1,fun2,fun3三个函数都定义为Promise对象

 

generator最大的不同是会控制函数的执行和暂停，栗子为使用generator实现斐波那契数列：

function * fibonacci() {
    let [prev, curr] = [1, 0];
    for (;;) {
        [prev, curr] = [curr, prev + curr];
        yield curr;
    }
}

for (let n of fibonacci()) {
    if (n > 1000) break;
    console.log(n);
}

async/await则是generator的一个语法糖，将其进行了封装

同样实现一个斐波那契数列：

var fi = async function() {
    var
        t,
        a = 0,
        b = 1,
        n = 0;
    while (n < 10) {
        await a;
        [a, b] = [b, a + b];
        n ++;
        console.log(a)
    }
    return;
}

可以看出，与generator相比，async/await的优点在于1.有其内置的执行器。2.有着更好的语意性。3.其适用性更强：yield 命令后面只能是 Thunk 函数或 Promise 对象，而 async 函数的 await 命令后面，可以跟 Promise 对象和原始类型的值