promise實現多個請求並行串行執行

早上查資料,偶然發現這個話題,發現本身並不會,因而乎,下來研究了一下。

想一想以前咱們用jquery寫請求的時候,要實現請求的串行執行,咱們多是這麼作的。jquery

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

回掉嵌套的這麼深,看起來很痛苦啊,因而乎咱們的promise出現啦,完美的解決咱們的回掉地獄~ajax

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

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

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

下面

/**
 * 建立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
});
相關文章
相關標籤/搜索