前言
在之前的文章中,我们有讲过
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())
一个简单的异步串行就实现了,是不是很简洁。