小技巧:使用Array.reduce建立Promise回調鏈

前端的同窗們確定會遇到多個異步組合的場景，好比須要等待多個請求一同返回後處理或是發出多個請求只取第一個返回結果，這裏咱們可使用Promise強大的api: Promise.all、Promise.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的方法均可以。相似的，咱們能夠用這個作不少東西，好比業務處理、動畫加載。更多奇思妙想正等着你。