首頁 > web前端 > js教程 > 主體

JavaScript中Promise.all和Promise.race方法的介紹(附程式碼)

不言
發布: 2019-03-15 14:10:10
轉載
3597 人瀏覽過

這篇文章帶給大家的內容是關於JavaScript中Promise.all和Promise.race方法的介紹(附程式碼),有一定的參考價值,有需要的朋友可以參考一下,希望對你有所幫助。

Promise.all() 方法接受一個包含 Promise 物件或普通值的陣列(或其它可迭代物件)作為參數,並傳回一個 Promise。當所有 Promise 物件都 resolve 後,將所有 resolve 值以陣列形式作為 Promise.all() resolve 的結果。如果其中一個的 Promise 被 reject,立即以第一個 reject 的值作為 Promise.all() reject 結果。

在實際應用中,如果需要從幾個介面取得數據,並且要在所有資料到達後才執行某些操作,就可以使用Promise.all()。

const p1 = new Promise(function (resolve) { setTimeout(resolve, 200, 1) })
const p2 = Promise.resolve(2)
const p3 = 3
Promise.all([p1, p2, p3]).then(function (res) { console.log(res) }) // [1,2,3]
登入後複製

以下是程式碼實現,需要一個計數器,來確認所有 promise 物件都已經 resolved,之後傳回結果。需要一個數組,按順序記錄回傳結果。如果使用類似 for (var i = 0; i < iterable[i]; i ) 的方式遍歷,為避免閉包只能傳入變數所引用的問題,則需要嵌套一層自執行函數。這裡使用 for ... in 循環,使函數可以支援除數組外的其它可迭代對象,如資料結構 Set。

const all = function (iterable) {
  return new Promise(function (resolve, reject) {
    let count = 0, ans = new Array(count)
    for (const i in iterable) {
      const v = iterable[i]
      if (typeof v === 'object' && typeof v.then === 'function') {
        v.then(function (res) {
          ans[i] = res
          if (--count === 0) resolve(ans)
        }, reject)
        count++
      } else {
        ans[i] = v
      }
    }
  })
}

const p1 = new Promise(function (resolve) { setTimeout(resolve, 200, 1) })
const p2 = Promise.resolve(2)
const p3 = 3
all([p1, p2, p3]).then(function (res) { console.log(res) }) // [1,2,3]
登入後複製

同 Promise.all(),Promise.race() 方法接受一個包含 Promise 物件或普通值的陣列(或其它可迭代物件)作為參數,並傳回一個 Promise。一旦其中一個的 Promise 物件 resolve 以後,立即把 resolve 的值當作 Promise.race() resolve 的結果。如果其中一個的物件 reject,Promise.race也會立即 reject。

在實際應用中,如果可以從幾個介面取得相同的數據,哪個介面資料先到就先用哪個,就可以使用Promise.race(),所需時間等於其中最快的那個接口。下面是程式碼:

const race = function (iterable) {
  return new Promise(function (resolve, reject) {
    for (const i in iterable) {
      const v = iterable[i]
      if (typeof v === 'object' && typeof v.then === 'function') {
        v.then(resolve, reject)
      } else {
        resolve(v)
      }
    }
  })
}
const p1 = new Promise(function (resolve) { setTimeout(resolve, 200, 1) })
const p2 = new Promise(function (resolve) { setTimeout(resolve, 100, 2) })
race([p1, p2]).then(function (res) { console.log(res) }) // 2
登入後複製

#

以上是JavaScript中Promise.all和Promise.race方法的介紹(附程式碼)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:segmentfault.com
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板