1. 程式人生 > >js實現多個請求並列執行

js實現多個請求並列執行

print 多個 timeout ror 使用 創建 int 調用 資料

早上查資料,偶然發現這個話題,發現自己並不會,於是乎,下來研究了一下。

想想之前我們用jquery寫請求的時候,要實現請求的串行執行,我們可能是這麽做的。

$.ajax({
    url: ‘‘,
    data: ‘‘,
    success: function (data) {
       $.ajax({
            url: ‘‘,
            data: ‘‘,
            success: function (data) {
                $.ajax({
                    // 如此一層嵌套一層
                })
            }
        }) 
    }
})

回掉嵌套的這麽深,看起來很痛苦啊,於是乎我們的promise出現啦,完美的解決我們的回掉地獄~

使用promise實現==串行==很簡單,調用promise.all()方法就好

那如何比較優雅的實現幾個操作的==串行==吶?

在promise中返回一個promise對象就是一個串行。
下面我們來簡單實現一個。


下面

/**
 * 創建promise
 * @param {Number} value 
 */
function makePromise (value) {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(value);
    }, Math.random() * 1000)
  })
}
/**
 * 打印結果
 * @param {Number} value 
 */
function print (value) {
  return value
}

let promises = [1, 3, 4, 5, 6].map((item, index) => {
  return makePromise(item)
});

// 並行執行
Promise.all(promises)
.then(() => {
  console.log(‘done‘)
})
.catch(() => {
  console.log(‘error‘)
})

// 串行執行
let parallelPromises = promises.reduce(
  (total, currentValue) => total.then(() => currentValue.then(print)),Promise.resolve()
)

parallelPromises
.then(() => {
  // console.log(‘done‘)
})
.catch(() => {
  console.log(‘done‘)
})

// 順帶復習一下reduce方法

reduce((total, currentValue, currentIndex, arr) => {}, initialValue)
let arr1 = [1, 2, 3, 4, 5]
let res = arr1.reduce((total, currentValue, currentIndex, arr) => {
    return total + currentValue
});

js實現多個請求並列執行