Promise、generator、async类同步编程

受javascript语言特性的影响，编程过程中充斥着大量异步回调，这会让代码维护起来特别麻烦，一步步走向回调地狱。社区中最早提出Promise解决方案，es6将其融入语法标准，并提供了generator、async，向类同步编程不断努力。本文会通过这三个方面演示类同步进化过程。

1.Promise

Promise提供异步编程的容器，包含异步代码，在得到异步结果时，通过resolve传递数据（resove对应then所指定的函数，其实也就是单个过程的异步回调，可以理解成将之前的回调函数放在then方法中定义）。

以ajax请求封装为例：

传统形式

function ajax(url, success) {
       var xhr = new XMLHttpRequest();
       xhr.open("GET", url);
       xhr.send();
       xhr.onreadystatechange = function () {
           if (xhr.status == 200 && xhr.readyState == 4) {
               //将请求结果作为实参传入成功回调
               success(xhr.responseText);
           }
       }
   }
   //如果两个异步过程有先后顺序，则会出现这种嵌套情况
   ajax("http://vebcoder.cn:9527/api/getTypeOne", function (res) {
       console.log(res);
       ajax("http://vebcoder.cn:9527/api/goodList", function (res) {
           console.log(res);
       })
   })

Promise形式

function ajax(url) {
     //promise容器包裹异步过程
     return new Promise(resolve => {

        var xhr = new XMLHttpRequest();
        xhr.open("GET", url);
        xhr.send();
        xhr.onreadystatechange = function () {
             if (xhr.status == 200 && xhr.readyState == 4) {
                 //将异步结果使用resolve进行传递
                 resolve(xhr.responseText);
             }
        }

     })
}


ajax("http://vebcoder.cn:9527/api/getTypeOne")
.then(res=>{
    console.log(JSON.parse(res))
 })
.then(()=>{
    return ajax("http://vebcoder.cn:9527/api/goodList")
})
.then(res=>{
    console.log(JSON.parse(res))
})

解决了回调函数横向发展的问题，变成了纵向发展结构。直观确实很直观但是一大堆的then方法，！接下来generator登场

2.generator

乍一看，generator不过是一个有多个返回值的函数而已，奥妙在于如果不调用next方法，代码会停止执行的。

基础用法

//function后加*
function* Gen(){
     console.log(1);
     yield;
     console.log(2)
     yield;
     console.log(3);
     return;
}
//调用函数获得指针对象
var g=Gen();
g.next();//1
g.next();//2
g.next();//3

第一次调用next执行到第一个yield，第三次执行到函数末尾return的位置。

奥妙之处

function* Gen(){
    //用变量接收yield命令
    var res=yield;
    console.log(res)
}
var g=Gen();
g.next();
//next传入参数
g.next(100);//100

第一次调用next方法，代码执行到yield停止执行。第二次调用next传入参数，代码继续执行，并将传入next的参数赋值给res变量。next方法可以带一个参数，该参数就会被当作上一个yield表达式的返回值。
那么我们就可以这样做：

//上述封装的ajax方法-传统形式
function* Gen(){
                                                 //请求成功开始下一步
    ajax("http://vebcoder.cn:9527/api/getTypeOne",res=>{g.next(res)})
    // 接收yield返回值
    let res=yield;
    console.log(res)//请求的数据结果
}
var g=Gen();
// 开始执行代码
g.next();

//上述封装的ajax方法-Promise形式
function* Gen(){
                                                    //请求成功开始下一步
    ajax("http://vebcoder.cn:9527/api/getTypeOne").then(res=>{g.next(res)})
    // 接收yield返回值
    let res=yield;
    console.log(res)//请求的数据结果
}
var g=Gen();
// 开始执行代码
g.next();

使用口诀：上一步回调，下一步，接收yield等待结果传入

按理说这种形式已经不错了，不用再往下看了，除非你能忍住！

3.async

async是generator的语法糖，你只需关注两部、步操作就行。相当于对Promise和generator进行了融合。

async function Asy(){
                                    //等待promise实例
    let res=await ajax("http://vebcoder.cn:9527/api/getTypeOne")
    console.log(res)//请求的数据结果
}
Asy();

//结合自执行函数
;(async function(){
    let res=await ajax("http://vebcoder.cn:9527/api/getTypeOne")
    console.log(res)//请求的数据结果
}())

async函数就是将Generator 函数的星号（*）替换成async，将yield替换成await。
注意：await后面需要跟一个promise实例，无需手动传递结果！

最后来一个对比（有次序的异步过程）：

//传统方式（对应上述传统ajax封装形式）
ajax("http://vebcoder.cn:9527/api/getTypeOne", function (res) {
    console.log(res);
    ajax("http://vebcoder.cn:9527/api/goodList", function (res) {
        console.log(res);
    })
})

//promise (对应上述promise ajax封装形式)
ajax("http://vebcoder.cn:9527/api/getTypeOne")
    .then(res=>{
        console.log(JSON.parse(res))
    })
    .then(()=>{
        return ajax("http://vebcoder.cn:9527/api/goodList")
    })
    .then(res=>{
        console.log(JSON.parse(res))
    })

//generator (对应上述promise ajax封装形式)
function* Gen(){
                                                    //请求成功开始下一步
    ajax("http://vebcoder.cn:9527/api/getTypeOne").then(res=>{g.next(res)})
    // 接收yield返回值
    let res=yield;
    console.log(res);

    ajax("http://vebcoder.cn:9527/api/goodList").then(res=>{g.next(res)})
    // 接收yield返回值
    let res2=yield;
    console.log(res2);

}
var g=Gen();
// 开始执行代码
g.next();

//async (对应上述promise ajax封装形式)
// 发送请求
;(async function(){
    let res=await ajax("http://vebcoder.cn:9527/api/getTypeOne")
    console.log(res)//请求的数据结果
    let res2=await ajax("http://vebcoder.cn:9527/api/goodList")
    console.log(res2)//请求的数据结果
}())

async有更好的语义，几乎达到与同步代码一样的编程体验！

2019，不过是追求喜新厌旧的年头！