快捷導(dǎo)航

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

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

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

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

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

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

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

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

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

手寫(xiě)實(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)
      })
    }
  })
}

驗(yàn)證使用PromiseAll()：

const p1 = Promise.resolve(3) // 等價(jià)于 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就輸出第一個(gè)reject的結(jié)果 Error: fail
})

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

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

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

那個(gè)率先改變的Promise實(shí)例的返回值，就傳遞給p的返回值。

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

手寫(xiě)實(shí)現(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)
      })
    }
  })
}

驗(yàn)證使用PromiseRace()：

const p1 = Promise.resolve(3) // 等價(jià)于 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)
})

補(bǔ)充：ES6 Promise.race和Promise.all方法

一、Pomise.all的使用

Promise.all可以將多個(gè)Promise實(shí)例包裝成一個(gè)新的Promise實(shí)例。同時(shí)，成功和失敗的返回值是不同的，成功的時(shí)候返回的是一個(gè)結(jié)果數(shù)組，而失敗的時(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}秒后醒來(lái)`)
    }, time)
  })
}

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

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

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

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

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

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

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

二、Promise.race的使用

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

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)  // 打開(kāi)的是 'failed'
})

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

您可能感興趣的文章: