快捷導(dǎo)航

ES6中的Promise.all()和Promise.race()函數(shù)的實現(xiàn)方法

更新時間：2023年02月03日 10:42:54 作者：theMuseCatcher

這篇文章主要介紹了ES6的Promise.all()和Promise.race()函數(shù),結(jié)合實例代碼介紹了ES6 Promise.race和Promise.all方法使用，通過實例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下

ES6中的Promise.all()和Promise.race()函數(shù)

Promise.all() 方法用于將多個 Promise 實例，包裝成一個新的 Promise 實例。

var pAll = Promise.all([p1, p2, p3])

Promise.all 方法的參數(shù)不一定是數(shù)組，但是必須具有 iterator 接口，且返回的每個成員都是 Promise 實例。

返回值 pAll 的狀態(tài)由 p1、p2、p3 決定，分成兩種情況：

只有p1、p2、p3的狀態(tài)都變成fulfilled，p的狀態(tài)才會變成fulfilled，此時p1、p2、p3的返回值組成一個數(shù)組，傳遞給p的回調(diào)函數(shù)。
只要p1、p2、p3之中有一個被rejected，p的狀態(tài)就變成rejected，此時第一個被reject的實例的返回值，會傳遞給p的回調(diào)函數(shù)。

手寫實現(xiàn)Promise.all()函數(shù)：

var PromiseAll = function (promises) {
  return new Promise((resolve, reject) => {
    // 判斷是否具有 iterator 接口：return typeof promises[Symbol.iterator] === 'function'
    if (typeof promises[Symbol.iterator] !== 'function') {
      reject(`TypeError: ${promises} is not iterable`)
    }
    if (promises.length === 0) {
      return resolve([])
    }
    const len = promises.length
    var result = []
    for (let p of promises) {
      Promise.resolve(p).then(res => {
        result.push(res)
        if (result.length === len) {
          resolve(result)
        }
      }).catch(err => {
        reject(err)
      })
    }
  })
}

驗證使用PromiseAll()：

const p1 = Promise.resolve(3) // 等價于 new Promise((resolve, reject) => resolve(3))
const p2 = true
const p3 = 'hello'
const p4 = Promise.reject('rej')
var pAll = PromiseAll([p1, p2, p3]).then(res => {
  console.log('pAll-res:', res) // [3, true, 'hello']
}).catch(err => {
  console.log('pAll-err:', err) // 有reject就輸出第一個reject的結(jié)果 Error: fail
})

Promise.race() 方法同樣是將多個 Promise 實例，包裝成一個新的 Promise 實例。

var pRace = Promise.race([p1, p2, p3])

只要p1、p2、p3之中有一個實例率先改變狀態(tài)，p的狀態(tài)就跟著改變。

那個率先改變的Promise實例的返回值，就傳遞給p的返回值。

輸出第一個獲取到的結(jié)果，無論是resolve還是reject

手寫實現(xiàn)Promise.race()函數(shù)：

var PromiseRace = function (promises) {
  return new Promise((resolve, reject) => {
    // 判斷是否具有 iterator 接口：return typeof promises[Symbol.iterator] === 'function'
    if (typeof promises[Symbol.iterator] !== 'function') {
      reject(`TypeError: ${promises} is not iterable`)
    }
    if (promises.length === 0) {
      return resolve([])
    }
    for (let p of promises) {
      Promise.resolve(p).then(res => {
        resolve(res)
      }).catch(err => {
        reject(err)
      })
    }
  })
}

驗證使用PromiseRace()：

const p1 = Promise.resolve(3) // 等價于 new Promise((resolve, reject) => resolve(3))
const p2 = true
const p3 = 'hello'
const p4 = Promise.reject('rej')
var pRace = PromiseRace([p1, p2, p3]).then(res => {
  console.log('pRace-res:', res) // 3
}).catch(err => {
  console.log('pRace-err:', err)
})

補充：ES6 Promise.race和Promise.all方法

一、Pomise.all的使用

Promise.all可以將多個Promise實例包裝成一個新的Promise實例。同時，成功和失敗的返回值是不同的，成功的時候返回的是一個結(jié)果數(shù)組，而失敗的時候則返回最先被reject失敗狀態(tài)的值。

eg：

let p1 = new Promise((resolve, reject) => {
  resolve('成功了')
})

let p2 = new Promise((resolve, reject) => {
  resolve('success')
})

let p3 = Promse.reject('失敗')

Promise.all([p1, p2]).then((result) => {
  console.log(result)               //['成功了', 'success']
}).catch((error) => {
  console.log(error)
})

Promise.all([p1,p3,p2]).then((result) => {
  console.log(result)
}).catch((error) => {
  console.log(error)      // 失敗了，打出 '失敗'
})

eg:

let wake = (time) => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(`${time / 1000}秒后醒來`)
    }, time)
  })
}

let p1 = wake(3000)
let p2 = wake(2000)

Promise.all([p1, p2]).then((result) => {
  console.log(result)       // [ '3秒后醒來', '2秒后醒來' ]
}).catch((error) => {
  console.log(error)
})

Promse.all在處理多個異步處理時非常有用，比如說一個頁面上需要等兩個或多個ajax的數(shù)據(jù)返回之后才正常顯示，在此之前只顯示loading圖標(biāo)。
eg：

let wake = (time) => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(`${time / 1000}秒后醒來`)
    }, time)
  })
}

let p1 = wake(3000)
let p2 = wake(2000)

Promise.all([p1, p2]).then((result) => {
  console.log(result)       // [ '3秒后醒來', '2秒后醒來' ]
}).catch((error) => {
  console.log(error)
})

需要特別注意的是，Promise.all獲得的成功結(jié)果的數(shù)組里面的數(shù)據(jù)順序和Promise.all接收到的數(shù)組順序是一致的，即p1的結(jié)果在前，即便p1的結(jié)果獲取的比p2要晚。這帶來了一個絕大的好處：在前端開發(fā)請求數(shù)據(jù)的過程中，偶爾會遇到發(fā)送多個請求并根據(jù)請求順序獲取和使用數(shù)據(jù)的場景，使用Promise.all毫無疑問可以解決這個問題。

二、Promise.race的使用

顧名思義，Promse.race就是賽跑的意思，意思就是說，Promise.race([p1, p2,
p3])里面哪個結(jié)果獲得的快，就返回那個結(jié)果，不管結(jié)果本身是成功狀態(tài)還是失敗狀態(tài)。Promise.race方法同樣是將多個 Promise 實例，包裝成一個新的 Promise 實例。Promise.race方法的參數(shù)與Promise.all方法一樣，如果不是 Promise
實例，就會先調(diào)用下面講到的Promise.resolve方法，將參數(shù)轉(zhuǎn)為 Promise 實例，再進一步處理。

eg:

let p1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('success')
  },1000)
})

let p2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    reject('failed')
  }, 500)
})

Promise.race([p1, p2]).then((result) => {
  console.log(result)
}).catch((error) => {
  console.log(error)  // 打開的是 'failed'
})

到此這篇關(guān)于ES6的Promise.all()和Promise.race()函數(shù)的文章就介紹到這了,更多相關(guān)Promise.all()和Promise.race()函數(shù)內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: