JavaScript异步史

什么是异步编程

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

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

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

属性

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

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

element.onclick=function(){
    console.log("clicked");
}
window.onload=function(){
    console.log("loaded");
}
复制代码

回调(发布/订阅)

因为javascript支持函数式编程，JavaSCript语言对异步编程的实现能够用回调函数。 DOM2级事件解决了这个问题以上两个问题

element.addEventListener("click",function(){
    console.log("clicked");
});
复制代码

Promise

Promise很好的解决了"并行"的问题，咱们看看用promise库怎么发送get请求：

import fetch from 'node-fetch';
fetch('https://api.github.com')
.then((res)=>res.json())
.then((json)=>console.log("json:",json))
复制代码

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

新建一个promise实例：

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

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

Generator

简单来讲generator能够理解为一个可遍历的状态机。

语法上generator，有两个特征：

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

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

import co from 'co';
co(function* (){
    let 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/1')).json(),
        (yield fetch('https://api.github.com/users/2')).json(),
    ];
    console.log("result:",result);
});
复制代码

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

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);
})();
复制代码

总结

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