小技巧:使用Array.reduce创建Promise回调链

小技巧:使用Array.reduce创建Promise回调链

技术杂谈小彩虹2021-08-22 11:46:56320A+A-

前端的同学们肯定会遇到多个异步组合的场景,比如需要等待多个请求一同返回后处理或是发出多个请求只取第一个返回结果,这里我们可以使用Promise强大的api: Promise.allPromise.race来处理。但当我们需要将多个异步处理顺序执行时,应该怎么办呢?

假设一个需求:我们需要发送一堆请求,但是需要在每个请求返回后再发送下一个:

    let urls = [
        'api.xxx.com/a',
        'api.xxx.com/b',
        'api.xxx.com/c',
        ...
    ]

常规做法我们会这样:

    await Axios.get(urls[0])
    await Axios.get(urls[1])
    await Axios.get(urls[2])
    ...

如果说请求数组长度是已知的,这样做也无可厚非。 但如果请求数组长度是未知的呢,我们就要办法让js自己去构造Promise回调链了。

先看一则文档: Array.reduce

 reduce() 方法接收一个函数作为累加器(accumulator),数组中的每个值(从左到右)开始缩减,最终为一个值。
 
 arr.reduce([callback, initialValue])
 参数
 callback
 执行数组中每个值的函数,包含四个参数:
 previousValue
 上一次调用回调函数返回的值,或者是提供的初始值(initialValue)
 currentValue
 数组中当前被处理的元素
 currentIndex
 当前被处理元素在数组中的索引, 即currentValue的索引.如果有initialValue初始值, 从0开始.如果没有从1开始.
 array
 调用 reduce 的数组
 initialValue
 可选参数, 作为第一次调用 callback 的第一个参数。
 返回值
 最后一次调用回调函数返回的结果

Array.reduce 可以处理数组中的每一个元素,并将处理后的结果作为参数传递给下一个处理函数。这样,我们可以在callback中构造一个Promise,并传递给下一个处理函数。

    urls.reduce(async (previousValue, currentValue) => {
        await previousValue
        return Axios.get(currentValue)
    }, Promise.resolve())
    
    // 不用async
    urls.reduce((previousValue, currentValue) => {
        return previousValue.then(() => Axios.get(currentValue))
    }, Promise.resolve())

这样我们就利用 Array.reduce 创建了一个Promise回调链,类似于:

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

当然了,这里的处理函数只用Axios做了个例子,任何一个返回Promise的方法都可以。类似的,我们可以用这个做很多东西,比如业务处理、动画加载。更多奇思妙想正等着你。

点击这里复制本文地址 以上内容由权冠洲的博客整理呈现,请务必在转载分享时注明本文地址!如对内容有疑问,请联系我们,谢谢!

支持Ctrl+Enter提交

联系我们| 本站介绍| 留言建议 | 交换友链 | 域名展示 | 支付宝红包
本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除

权冠洲的博客 © All Rights Reserved.  Copyright quanguanzhou.top All Rights Reserved
苏公网安备 32030302000848号   苏ICP备20033101号-1
本网站由 提供CDN/云存储服务

联系我们