javascript异步编程的前世此生，从onclick到await/async

javascript与异步编程

为了不资源管理等复杂性的问题，
javascript被设计为单线程的语言，即便有了html5 worker，也不能直接访问dom.

javascript 设计之初是为浏览器设计的GUI编程语言，GUI编程的特性之一是保证UI线程必定不能阻塞，不然体验不佳，甚至界面卡死。

通常安卓开发，会有一个界面线程，一个后台线程，保证界面的流畅。

因为javascript是单线程，因此采用异步非阻塞的编程模式，javascript的绝大多数api都是异步api.

本文是本人的一个总结：从Brendan Eich刚设计的第一版javascript到如今的ES7,一步步总结javascript异步编程历史。

说明：
本文全部源码请访问：https://github.com/etoah/note/tree/master/async
请安装babel环境，用babel-node 执行对应例子

什么是异步编程

那么什么是异步编程，异步编程简单来讲就是：执行一个指令不会立刻返回结果而执行下一个任务，而是等到特定的事件触发后，才能获得结果。

如下是当有ABC三个任务，同步或异步执行的流程图：

示意图来自stackoverflow

同步

thread ->|----A-----||-----B-----------||-------C------|

异步

A-Start ---------------------------------------- A-End   
           | B-Start ----------------------------------------|--- B-End   
           |   |     C-Start -------------------- C-End      |     |   
           V   V       V                           V         V     V      
  thread-> |-A-|---B---|-C-|-A-|-C-|--A--|-B-|--C--|---A-----|--B--|

显然，在宏观上，同步程序是串行的执行各任务，执行单个任务时会阻塞纯线程，异步能够“并行”的执行任务。

异步编程时就须要指定异步任务完成后须要执行的指令，总的来讲有如下几种“指定异步指令”的方式：

1. 属性
2. 回调
3. Promise
4. Generator
5. await,async

下面会一步一步展示各类方式。

属性

每一个编程语言对异步实现的方式不同，C#能够用委托，java能够用接口或基类传入的方式，

早期的javascript的异步的实现也相似于这种类的属性的方式：每一个类实例的相关回调事件有相应的handler(onclick,onchange,onload等)。

在DOM0级事件处理程序，就是将一个函数赋值给一个元素的属性。

element.onclick=function(){
    alert("clicked");
}
window.onload=function(){
    alert("loaded");
}

问题

这种写法简单明了，同时会有如下几个问题

• 耦合度高
  全部的事件处理都须要写的一个函数中：

window.onload=function(){
            handlerA();
            handlerB();
            handlerc();
        }

若是这三个handler来自三个不一样的模块，那这个文件模块耦合度就为3(华为的计算方法)。依赖高，不利于复用和维护。

• 不安全，容易被重写

window.onload=function(){
    console.log("handler 1");
}
//...  不少其它框架，库，主题 的代码
var handlerbak=window.onload
window.onload=function(){
    handlerbak();  //这行注释的话上面handler 1就会被覆盖。
    console.log("handler 2");
}

当代码量大时，这种问题没有warning也没有error, 经验不丰富的前端可能花费大量的时间查找问题。

事件handler容易被重写，库/框架的安全，寄托于使用者的对框架的熟练程度，极不安全。

回调（发布/订阅）

因为javascript支持函数式编程，JavaScript语言对异步编程的实现能够用回调函数。

DOM2级事件解决了这个问题以上两个问题

element.addEventListener("click",function(){
    alert("clicked");
})

这里其实是一个发布订阅模式，addEventListener至关于subscribe, dispatchEvent至关于publish,
很好的解决了订阅者以前的依赖，jquery,vue,flux,angularjs均实现了相似的模式。

发布订阅模式虽解决了上面耦合和不安全的问题，可是在实现大型应用时，还会有如下问题。

问题

• 回调黑洞
  多层回调嵌套，代码可读性差。

step1(function (value1) {
    step2(value1, function(value2) {
        step3(value2, function(value3) {
            step4(value3, function(value4) {
                // Do something with value4
            });
        });
    });
});

• 异常没法捕捉

try{
 setTimeout(function(){
    JSON.parse("{'a':'1'}")
    console.log("aaaa")
 },0)
}
catch(ex){
 console.log(ex); //不能catch到这个异常
}

• 流程控制（异步代码，同步执行）

当C操做依赖于B操做和C操做,而B与A没有依赖关系时，不用第三方库（如async,eventproxy）的话,B与A本能够并行，却串行了，性能有很大的提高空间。
流程图以下：

graph LR
Start-->A
A-->B
B-->C

但用promise后，能够方便的用并行：
Promise:

graph LR
Start-->A
Start-->B
A-->C
B-->C

Promise(ECMAScript5)

如上流程图，Promise很好的解决了“并行”的问题，咱们看看用promise库怎么发送get请求：

import fetch from 'node-fetch'
fetch('https://api.github.com/users/etoah')
.then((res)=>res.json())
.then((json)=>console.log("json:",json))

能够看到promise把原来嵌套的回调，改成级连的方式了，实际是一种代理(proxy)。
新建一个promise实例：

var promise = new Promise(function(resolve, reject) {
  // 异步操做的代码
  if (/* 异步操做成功 */){
    resolve(value);
  } else {
    reject(error);
  }
});

promise把成功和失败分别代理到resolved 和 rejected .
同时还能够级连catch异常。

到这里异步的问题，有了一个比较优雅的解决方案了，若是要吹毛求疵，还有一些别扭的地方,须要改进。

问题

封装，理解相对回调复杂，这是如下我公司项目的一段代码(coffeescript),并发代码，加上resolved,rejected的回调,
即便是用了coffee，混个业务和参数处理，第一眼看上去仍是比较懵，代码可读性并无想象中的好。

#并发请求companyLevel
        companyInfoP = companyinfoServicesP.companyLevel({hid: req.session.hid})
        requestP(userOption).success((userInfo)->
            roleOption =
                uri: "#{config.server_host}/services/rights/userroles?userid=#{user.userId}"
                method: 'GET'
            #保证companyInfo 写入
            Q.all([companyInfoP, requestP(roleOption)]).spread(
                (companyinfo, roles)->
                    Util.session.init req, user, roles.payload
                    Util.session.set(req, "companyInfo", companyinfo.payload)
                    Util.session.set(req, "roleids", roles.payload)
                    u = Util.session.getInfo req
                    return next {data: Util.message.success(u)}
            , (err)->
                return next err
            )

在指明resolved 和 rejected的时，用的仍是最原始的回调的方式。

能不能用同步的方式写异步代码？

在ES5前是这基本不可实现，可是，ES6的语法引入了Generator, yeild的关键字能够用同步的语法写异步的程序。

Generator(ECMAScript6)

简单来讲generators能够理解为一个可遍历的状态机。
语法上generator,有两个特征：

1. function 关键字与函数名以前有一个星号。
2. 函数体内部使用yield关键字，定义不一样的内部状态。

因为generator是一个状态机，因此须要手动调用next 才能执行，但TJ大神开发了co模块，能够自动执行generator。

import co from 'co';
co(function* (){
    var now = Date.now();
    yield sleep(150);   //约等待150ms
    console.log(Date.now() - now);
});

function sleep(ms){
    return function(cb){
        setTimeout(cb, ms);
    };
}
import fetch from 'node-fetch'

co(function* (){
    let result= yield  [
         (yield fetch('https://api.github.com/users/tj')).json(),
         (yield fetch('https://api.github.com/users/etoah')).json(),
        ];
    console.log("result:",result)
});

不管是延迟执行，仍是并发的从两个接口获取数据，generator均可以用同步的方式编写异步代码。

注意：co模块约定，yield命令后面只能是Thunk函数或Promise对象

问题

• 须要手动执行
  即便用了TJ的CO模块，不是标准的写法，感受用hack解决问题
• 不够直观，没有语义化。

await,async(ECMAScript7)

ES7 引入了像C#语言中的 await,async关键字,并且babel已支持（引入plugins:transform-async-to-generator ）

async函数彻底能够看做多个异步操做，包装成的一个Promise对象，而await命令就是内部then命令的语法糖。

import fetch from 'node-fetch';
(async function (){
    let result= await fetch('https://api.github.com/users/etoah');
    let json =await result.json();
    console.log("result:",json);
})();

//exception
(async function (){
    try{
        let result= await fetch('https://api.3github.com/users/etoah');
        let json =await result.json();
        console.log("result:",json);
    }
    catch(ex){
        console.warn("warn:",ex);
    }
})()

简单比较会发现，async函数就是将Generator函数的星号（*）替换成async，将yield替换成await，同时不须要co模块，更加语义化。

可是与yeild又不彻底相同，标准没有接收await*的语法( :( 查看详情)，

若需“并行”执行promise数组，推荐用Promise.All，因此须要并行请求时，须要这样写：

(async function (){
    let result= await Promise.all([
         (await fetch('https://api.github.com/users/tj')).json(),
         (await fetch('https://api.github.com/users/etoah')).json()
        ]);
    console.log("result:",result);
})();

虽然说没有不能用 await* , 整体来讲结构仍是简单清晰的

没有任何callback,流程和异常捕获是彻底同步的写法。并且javascript语言级别支持这种写法。能够说这是异步的终极解决方案了。

总结

到这里，jser结合promise,yield,await的写法，能够和回调嵌套说拜拜了。

虽有这么多的不一样的异步编程方式，可是异步编程的本质并无变，只有对coder更友好了而已，但对工程化可读性和可维护性有很大的改进。

全文完，若有不严谨的地方，欢迎指正。