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())
複製代碼

一個簡單的異步串行就實現了，是否是很簡潔。

想要學習更多開發技巧，關注公衆號：前端開發愛好者 一塊兒學習前端技能