多个接口顺序调用，实现方式的进化

场景：假设有4个异步方法要按顺序调用

1. 嵌套调用

为了顺序调用接口，出现多重嵌套，也就出现了俗称的 “回调地狱”；

  ajaxA("xxxx", ()=> { 
     ajaxB("xxxx", ()=> { 
        ajaxC("xxxx", ()=> { 
           ajaxD("xxxx", ()=> { 
                //处理data
                 XXXXXXX
            })
        })
    })
})

2.  Promise链式调用

new Promise(function(resolve){
    ajaxA("xxxx", ()=> { resolve(); })    
}).then(function(){
    return new Promise(function(resolve){
        ajaxB("xxxx", ()=> { resolve(); })    
    })
}).then(function(){
    return new Promise(function(resolve){
        ajaxC("xxxx", ()=> { resolve(); })    
    })
}).then(function(){
    ajaxD("xxxx");
}).catch(() => {
  console.log('Error')
}) ;

// 简化一下代码，将请求改造成一个通用函数

function request(options) {
    //.....
    return new Promise(....); //使用Promise执行请求,并返回Promise对象
}

request("ajaxA").then(
    (data1)=>{
    //处理data
    return request("ajaxB", data1);
}).then(
     (data2)=>{
     //处理data
     return request("ajaxC", data2)
}).then(
    (data3)=>{
     //处理data
    return request("ajaxD", data3)
})

3.  async  和   await

function request(options) {
    //.....
    return new Promise(....); //使用Promise执行请求,并返回Promise对象
}

async function load(){
    //请求失败后的处理, 可以使用try-catch来进行
    try{
        let data1 = await request("ajaxA");  
        let data2 = await request("ajaxB", data1);
        let data3 = await request("ajaxC", data2);
        let data4 = await request("ajaxD", data3);
        //await不仅等待Promise完成, 而且还拿到了resolve方法的参数

    } catch(e){
        //......
    }
}

注：async和await要搭配Promise使用, 它进一步极大的改进了Promise的写法
        await后面接一个会return new promise的函数并执行它
        await只能放在async函数里，async用于定义一个异步函数，该函数返回一个Promise。

        异步函数存在以下四种使用形式：

                函数声明： async function one() {}
                函数表达式： const one = async function() {}
                对象的方式： let obj = { async one() {} }
                箭头函数： const one = async () => {}

接下来研究下，直接使用的promise 和  async + await + Promise使用 的区别

参考资料：
https://juejin.cn/post/6874974581724020749
https://www.jianshu.com/p/b4fd76c61dc9
https://zhuanlan.zhihu.com/p/112081953