ES6 reduce 实现异步串行【初中级前端必会】

这是我参与 8 月更文挑战的第 3 天，活动详情查看： 8月更文挑战

前言

在以前的文章中，咱们有讲过ES6 reduce 的基本使用，相信看过童鞋应该对reduce的基本使用都可以彻底的掌握，这篇文章能够说是上一篇的补充吧。主要来聊一聊如何使用reduce 优雅的实现异步串行。

何为异步

异步（Asynchronous, async）是与同步（Synchronous, sync）相对的概念。在咱们学习的传统单线程编程中，程序的运行是同步的（同步不意味着全部步骤同时运行，而是指步骤在一个控制流序列中按顺序执行）。而异步的概念则是不保证同步的概念，也就是说，一个异步过程的执行将再也不与原有的序列有顺序关系。简单来理解就是：同步按你的代码顺序执行，异步不按照代码顺序执行，异步的执行效率更高。

以上是关于异步的概念的解释，接下来咱们通俗地解释一下异步：异步就是从主线程发射一个子线程来完成任务。

那么回到正题，如何实现一个异步串行？

异步串行

reduce构造连续 Promise 回调

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

一个简单的例子：

假设如今有不少请求接口,他们之间存在依赖关系，必须等第一个请求结束后再去请求第二个，以此类推，这种需求该如何去实现 ？

let list = [
  'www.baidu.com?a=1',
  'www.baidu.com?b=1',
  'www.baidu.com?c=1',
    ...
]
复制代码

其实这就是个异步串行的问题，简单的方法能够使用async await结合for循环：

async function fun(){
    for(let i=0;i<list.length;i++){
        await axios.get(list[i]);
    }
}
复制代码

除了上面的方法，还能够使用reduce,

list.reduce((pre,next)=>{
    return pre.then(()=>axios.get(next));
},Promise.resolve())
复制代码

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

list.reduce(async (pre,next)=>{
    await pre;//等待上一个Promise
    return axios.get(next);//返回一个新的Promise
},Promise.resolve())
复制代码

一个简单的异步串行就实现了，是否是很简洁。

想要学习更多开发技巧，关注公众号：前端开发爱好者 一块儿学习前端技能