reduce使用Promise.resolve()构造连续Promise回调实现系列异步请求按顺序执行

  • Post author:
  • Post category:其他


更多细节:

https://blog.ityuan.com/34e3a4b67f

reduce是es6中的遍历叠加方法,在某些时候和可以很方便的构造连续Promise回调,今天来看看咋玩的。

假设现在有很多需要get的接口,接口大概长这样:

let arr=[
    '***.com/a',
    '***.com/b',
    '***.com/c',
    .....
]

它们之间有依赖关系,必须第一个加载完去加载第二个,问如何实现这种加载的需求?

问题分析

上面的问题其实就是串行异步,就是把一系列的异步串起来,像糖葫芦一样,一个异步完了执行下一个。实现方法当然也很多,简单一点可以用async的await方法,和for一起使用:

async function go(){
    for(let i=0;i<arr.length;i++){
        await Axios.get(arr[i]);
    }
}

除了上面的方法,用reduce也是可以实现这种串行异步的:

arr.reduce((pre,next)=>{
    return prev.then(()=>Axios.get(next));
},Promise.resolve())

Promise.resolve是reduce的初始值,第一次遍历的prev.then就是Promise.resolve.then();每次返回一个Axios.get(next)的Promise,然后下次遍历的时候,用这个Promise后面接个then,用async分开写的更清楚些:

arr.reduce(async (pre,next)=>{
    await prev;//等待上一个Promise
    return Axios.get(next);//返回一个新的Promise
},Promise.resolve())

最后相当于把整个Promise连起来了:

Promise.resolve().then(()=>new Promise()).then(()=>new Promise())....