理解和使用Promise.all和Promise.race

zeyu 發布于2019-08-23 17:10 / 3017人閱讀

摘要：可迭代對象遍歷可以采用下標循環，遍歷和就無法使用下標。這帶來了一個絕大的好處在前端開發請求數據的過程中，偶爾會遇到發送多個請求并根據請求順序獲取和使用數據的場景，使用毫無疑問可以解決這個問題。

JavaScript的世界中，所有代碼都是單線程執行的。異步執行可以用回調函數實現，但是某些場景并不好用，且不易復用。Promise對象這種鏈式寫法的好處在于，先統一執行邏輯，不關心如何處理結果，然后，根據結果是成功還是失敗，在將來的某個時候調用success函數或fail函數。

Pomise.all的使用

Promise.all可以將多個Promise實例包裝成一個新的Promise實例。同時，成功和失敗的返回值是不同的，成功的時候返回的是一個結果數組，而失敗的時候則返回最先被reject失敗狀態的值。
Promise.all中傳入的是數組，返回的也是是數組，并且會將進行映射，傳入的promise對象返回的值是按照順序在數組中排列的，但是注意的是他們執行的順序并不是按照順序的，除非可迭代對象為空。

可迭代對象：
遍歷Array可以采用下標循環，遍歷Map和Set就無法使用下標。為了統一集合類型，ES6標準引入了新的iterable類型，Array、Map和Set都屬于iterable類型。具有iterable類型的集合可以通過新的for ... of循環來遍歷。

示例代碼如下：

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)      // 失敗了，打出 "失敗"
})

Promse.all在處理多個異步處理時非常有用，比如說一個頁面上需要等兩個或多個ajax的數據回來以后才正常顯示，在此之前只顯示loading圖標。

代碼模擬：

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獲得的成功結果的數組里面的數據順序和Promise.all接收到的數組順序是一致的，即p1的結果在前，即便p1的結果獲取的比p2要晚。這帶來了一個絕大的好處：在前端開發請求數據的過程中，偶爾會遇到發送多個請求并根據請求順序獲取和使用數據的場景，使用Promise.all毫無疑問可以解決這個問題。

Promise.race的使用

顧名思義，Promse.race就是賽跑的意思，意思就是說，Promise.race([p1, p2, p3])里面哪個結果獲得的快，就返回那個結果，不管結果本身是成功狀態還是失敗狀態。

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"
})

GPU云服務器云服務器理解module和injector 云計算和大數據的理解 docker安裝和使用 hadoop安裝和使用

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/103932.html

深度理解Promise--Promise的特點和方法詳解

摘要：實例生成以后，用方法分別指定狀態和狀態的回調函數。則是或的別名，用于指定發生錯誤時的回調函數。上述代碼也可以理解成這樣處理和前一個回調函數運行時發生的錯誤發生錯誤方法用于指定不管對象最后狀態如何，都會執行的回調函數。什么是promise？ Promise（承諾），在程序中的意思就是承諾我過一段時間（通常是一個異步操作）后會給你一個結果，是異步編程的一種解決方案。從語法上說，原生Pro...

wqj97 2019-08-26 10:48 評論0 收藏0
通過回調來理解Promise

摘要：可信任性確定性在解決上述的回調函數的問題之前，有必要先來認識一下的一些主要方法的起點執行結果依次是，，，代碼解讀以上代碼體現了的如下特性一旦決議調用過一次或者就不再重復調用決議回調或者改變決議回調。通過回調來理解Promise 我們都知道Promise的出現是為了規避回調地獄的，由此，我們先來深入了解一下回調的缺陷：回調 1、缺乏信任 2、不確定性 Example var mo...

DevYK 2019-08-20 18:30 評論0 收藏0
Promise的基本使用

摘要：執行完成接收一個函數作為參數，函數有兩個參數，和分別表示異步操作執行后成功的回調函數和失敗的回調函數。所以通常采用一個函數包含它執行完成可以使用異步操作中的數據執行完調用方法，就相當于我們之前寫的回調函數。基本概念個人理解就是使用同步編程的寫法完成異步編程操作。 const promise = new Promise((resolve, reject) => { //som...

biaoxiaoduan 2019-08-22 14:54 評論0 收藏0
Promise 中的三兄弟 .all(), .race(), .allSettled()

摘要：對于的來說基元函數包括組合函數的類型簽名返回情況完成如果傳入的可迭代對象為空，會同步地返回一個已完成狀態的。相反，如果是在指定的時間之后完成，剛返回結果就是一個拒絕狀態的從而觸發方法指定的回調函數。在行中，對每個小任務得到的結果進行匯總。為了保證的可讀性，本文采用意譯而非直譯。想閱讀更多優質文章請猛戳GitHub博客,一年百來篇優質文章等著你！從ES6 開始，我們大都使用的是 P...

vspiders 2019-08-26 10:45 評論0 收藏0
Promise使用細節

摘要：應用把一個異步操作和定時器放在一起。如果定時器先觸發就提示用戶超時用戶超時什么是值穿透或者期望傳入一個函數如果不是函數會發生值穿透和的第二個參數的區別比較類似是一個語法糖相當于還有一點區別就是如果第一個報錯第二個無法捕獲。 Promise使用細節使用promise需要注意的幾點: 1.如何用promise實現并行的異步 (Promise.all配合.map) Promise.all...

fnngj 2019-08-22 16:31 評論0 收藏0