promise 与 async 实现顺序异步任务对比

function queue_promise(arr) {
    let sequence = Promise.resolve();
    let res = [];
    arr.forEach(a => { //a为function,返回值为promise
        sequence = sequence.then(a).then(data => {
            res.push(data);
            return res;
        })
    })
    return sequence;
}

async function queue_async(arr) {
    let res = [];
    for(let a of arr) {
        let data = await a();  //不能写成a
        res.push(data);
    }
    return res;
}

//异步任务1
function getA() {
      return  new Promise(function(resolve, reject){ 
      setTimeout(function(){     
            resolve(2);
        }, 1000);
    });
}
 
//异步任务2
function getB() {
    return  new Promise(function(resolve, reject){       
        setTimeout(function(){
            resolve(3);
        }, 1000);
    });
}

function addAB(a,b) {
    return a+b
}

queue_promise([getA,getB])
  .then(data => {
    return addAB(data[0],data[1])
  }).then(data=>console.log(data))

queue_async([getA,getB])
  .then(data => {
    return addAB(data[0],data[1])
  }).then(data=>console.log(data))

两者思路相同，都是创建队列去处理异步任务
promise解决方法中，使用一个sequence初始触发的pomise，状态直接是resolve, 这个sequence不断承接(更新为)每个异步任务完成后的promise，并最终返回，返回的sequence中可以拿到所有异步任务的输出值res，另外，此处其实没有必要一定初始化 let sequence = Promise.resolve()， sequence只要承接(更新为)每个异步任务完成后的promiese即可，promise解决方法可以改写如下

function queue_promise(arr) {
    let sequence = null;
    let res = [];
    arr.forEach(a => { //a为function,返回值为promise
        sequence = a().then(data => { //直接a() 即直接调用函数返回promise
            res.push(data);
            return res;
        })
    })
    return sequence;
}

async解决方法与promise相同，有两点需要注意，第一个，await关键字不能在普通函数中使用，所以遍历异步任务时不能使用forEach或map这样的方法，只能使用for循环指令。第二个，上面定义每个异步任务为返回值为promise的普通函数，在promise方式中处理为 then(a) , 但在async方式中要写成 await a() 因为then接收的参数为函数，而await后面要跟一个需要等待的值，如果直接放函数则不会得到正确结果，这里需要直接放调用函数后返回的promise