成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

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

zeyu / 3077人閱讀

摘要:可迭代對(duì)象遍歷可以采用下標(biāo)循環(huán),遍歷和就無(wú)法使用下標(biāo)。這帶來(lái)了一個(gè)絕大的好處在前端開(kāi)發(fā)請(qǐng)求數(shù)據(jù)的過(guò)程中,偶爾會(huì)遇到發(fā)送多個(gè)請(qǐng)求并根據(jù)請(qǐng)求順序獲取和使用數(shù)據(jù)的場(chǎng)景,使用毫無(wú)疑問(wèn)可以解決這個(gè)問(wèn)題。

JavaScript的世界中,所有代碼都是單線程執(zhí)行的。異步執(zhí)行可以用回調(diào)函數(shù)實(shí)現(xiàn),但是某些場(chǎng)景并不好用,且不易復(fù)用。Promise對(duì)象這種鏈?zhǔn)綄懛ǖ暮锰幵谟?,先統(tǒng)一執(zhí)行邏輯,不關(guān)心如何處理結(jié)果,然后,根據(jù)結(jié)果是成功還是失敗,在將來(lái)的某個(gè)時(shí)候調(diào)用success函數(shù)或fail函數(shù)。
Pomise.all的使用

Promise.all可以將多個(gè)Promise實(shí)例包裝成一個(gè)新的Promise實(shí)例。同時(shí),成功和失敗的返回值是不同的,成功的時(shí)候返回的是一個(gè)結(jié)果數(shù)組,而失敗的時(shí)候則返回最先被reject失敗狀態(tài)的值。
Promise.all中傳入的是數(shù)組,返回的也是是數(shù)組,并且會(huì)將進(jìn)行映射,傳入的promise對(duì)象返回的值是按照順序在數(shù)組中排列的,但是注意的是他們執(zhí)行的順序并不是按照順序的,除非可迭代對(duì)象為空。

可迭代對(duì)象:
遍歷Array可以采用下標(biāo)循環(huán),遍歷Map和Set就無(wú)法使用下標(biāo)。為了統(tǒng)一集合類型,ES6標(biāo)準(zhǔn)引入了新的iterable類型,Array、Map和Set都屬于iterable類型。具有iterable類型的集合可以通過(guò)新的for ... of循環(huán)來(lái)遍歷。

示例代碼如下:
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在處理多個(gè)異步處理時(shí)非常有用,比如說(shuō)一個(gè)頁(yè)面上需要等兩個(gè)或多個(gè)ajax的數(shù)據(jù)回來(lái)以后才正常顯示,在此之前只顯示loading圖標(biāo)。

代碼模擬:
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)。

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

文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址:http://m.hztianpu.com/yun/103932.html

相關(guān)文章

  • 深度理解Promise--Promise的特點(diǎn)方法詳解

    摘要:實(shí)例生成以后,用方法分別指定狀態(tài)和狀態(tài)的回調(diào)函數(shù)。則是或的別名,用于指定發(fā)生錯(cuò)誤時(shí)的回調(diào)函數(shù)。上述代碼也可以理解成這樣處理和前一個(gè)回調(diào)函數(shù)運(yùn)行時(shí)發(fā)生的錯(cuò)誤發(fā)生錯(cuò)誤方法用于指定不管對(duì)象最后狀態(tài)如何,都會(huì)執(zhí)行的回調(diào)函數(shù)。 什么是promise? Promise(承諾),在程序中的意思就是承諾我過(guò)一段時(shí)間(通常是一個(gè)異步操作)后會(huì)給你一個(gè)結(jié)果,是異步編程的一種解決方案。從語(yǔ)法上說(shuō),原生Pro...

    wqj97 評(píng)論0 收藏0
  • 通過(guò)回調(diào)來(lái)理解Promise

    摘要:可信任性確定性在解決上述的回調(diào)函數(shù)的問(wèn)題之前,有必要先來(lái)認(rèn)識(shí)一下的一些主要方法的起點(diǎn)執(zhí)行結(jié)果依次是,,,代碼解讀以上代碼體現(xiàn)了的如下特性一旦決議調(diào)用過(guò)一次或者就不再重復(fù)調(diào)用決議回調(diào)或者改變決議回調(diào)。 通過(guò)回調(diào)來(lái)理解Promise 我們都知道Promise的出現(xiàn)是為了規(guī)避回調(diào)地獄的,由此,我們先來(lái)深入了解一下回調(diào)的缺陷: 回調(diào) 1、缺乏信任 2、不確定性 Example var mo...

    DevYK 評(píng)論0 收藏0
  • Promise的基本使用

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

    biaoxiaoduan 評(píng)論0 收藏0
  • Promise 中的三兄弟 .all(), .race(), .allSettled()

    摘要:對(duì)于的來(lái)說(shuō)基元函數(shù)包括組合函數(shù)的類型簽名返回情況完成如果傳入的可迭代對(duì)象為空,會(huì)同步地返回一個(gè)已完成狀態(tài)的。相反,如果是在指定的時(shí)間之后完成,剛返回結(jié)果就是一個(gè)拒絕狀態(tài)的從而觸發(fā)方法指定的回調(diào)函數(shù)。在行中,對(duì)每個(gè)小任務(wù)得到的結(jié)果進(jìn)行匯總。 為了保證的可讀性,本文采用意譯而非直譯。 想閱讀更多優(yōu)質(zhì)文章請(qǐng)猛戳GitHub博客,一年百來(lái)篇優(yōu)質(zhì)文章等著你! 從ES6 開(kāi)始,我們大都使用的是 P...

    vspiders 評(píng)論0 收藏0
  • Promise使用細(xì)節(jié)

    摘要:應(yīng)用把一個(gè)異步操作和定時(shí)器放在一起。如果定時(shí)器先觸發(fā)就提示用戶超時(shí)用戶超時(shí)什么是值穿透或者期望傳入一個(gè)函數(shù)如果不是函數(shù)會(huì)發(fā)生值穿透和的第二個(gè)參數(shù)的區(qū)別比較類似是一個(gè)語(yǔ)法糖相當(dāng)于還有一點(diǎn)區(qū)別就是如果第一個(gè)報(bào)錯(cuò)第二個(gè)無(wú)法捕獲。 Promise使用細(xì)節(jié) 使用promise需要注意的幾點(diǎn): 1.如何用promise實(shí)現(xiàn)并行的異步 (Promise.all配合.map) Promise.all...

    fnngj 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<