快捷導(dǎo)航

JavaScript中promise.all和promise.race的區(qū)別詳解

更新時(shí)間：2024年09月24日 09:37:46 作者：肖肖肖麗珠

Promise.all和Promise.race是JavaScript的兩種Promise處理方法,Promise.all要求所有Promise對(duì)象成功完成才返回成功,若有一個(gè)失敗則整體失敗,Promise.race返回第一個(gè)完成的Promise結(jié)果,需要的朋友可以參考下

前言

Promise.all和Promise.race是JavaScript中Promise API的兩個(gè)重要方法，它們?cè)谔幚矶鄠€(gè)Promise對(duì)象時(shí)表現(xiàn)出不同的行為。以下是它們之間的主要區(qū)別：

1. 功能和行為

Promise.all：

功能：接收一個(gè)包含多個(gè)Promise的數(shù)組（或類數(shù)組對(duì)象）作為參數(shù)，并返回一個(gè)新的Promise。

行為：只有當(dāng)數(shù)組中的所有Promise對(duì)象都成功完成時(shí)（即狀態(tài)都變?yōu)閒ulfilled），返回的Promise對(duì)象才會(huì)成功完成，并將所有Promise的結(jié)果作為一個(gè)數(shù)組返回。如果數(shù)組中的任何一個(gè)Promise對(duì)象失?。礌顟B(tài)變?yōu)閞ejected），則返回的Promise對(duì)象會(huì)立即失敗，并將第一個(gè)失敗的Promise的原因作為失敗原因返回。

使用場(chǎng)景：適用于需要等待所有異步操作都成功完成后再進(jìn)行下一步操作的場(chǎng)景，如同時(shí)加載多個(gè)資源并在所有資源都加載完成后顯示頁面。

Promise.race：

功能：同樣接收一個(gè)包含多個(gè)Promise的數(shù)組（或類數(shù)組對(duì)象）作為參數(shù)，并返回一個(gè)新的Promise。

行為：這個(gè)返回的Promise會(huì)在數(shù)組中的任意一個(gè)Promise狀態(tài)變?yōu)閒ulfilled或rejected時(shí)被解決或拒絕，且以第一個(gè)被解決的Promise的結(jié)果（或原因）作為其結(jié)果返回。如果數(shù)組中的所有Promise都被拒絕，則返回的Promise將會(huì)以最先被拒絕的Promise的原因作為其原因拒絕。

使用場(chǎng)景：適用于設(shè)置超時(shí)機(jī)制或只關(guān)心第一個(gè)完成的異步操作的場(chǎng)景，如發(fā)起一個(gè)請(qǐng)求并設(shè)置一個(gè)超時(shí)時(shí)間，如果請(qǐng)求在超時(shí)時(shí)間內(nèi)完成，則返回請(qǐng)求結(jié)果；如果超時(shí)，則返回超時(shí)錯(cuò)誤。

2. 返回值和狀態(tài)

Promise.all：返回一個(gè)新的Promise，其狀態(tài)取決于所有傳入的Promise對(duì)象的狀態(tài)。如果所有Promise都成功完成，則新Promise也成功完成，并返回所有結(jié)果的數(shù)組；如果有任何一個(gè)Promise失敗，則新Promise也失敗，并返回第一個(gè)失敗的原因。

Promise.race：同樣返回一個(gè)新的Promise，但其狀態(tài)僅由第一個(gè)解決的Promise決定。無論第一個(gè)解決的Promise是成功還是失敗，新Promise的狀態(tài)都會(huì)與其保持一致，并返回相應(yīng)的結(jié)果或原因。

3. 示例

Promise.all示例：

const promise1 = Promise.resolve(3);  
const promise2 = new Promise((resolve, reject) => setTimeout(resolve, 100, 'foo'));  
const promise3 = new Promise((resolve, reject) => setTimeout(resolve, 50, 'bar'));  
 
Promise.all([promise1, promise2, promise3]).then((values) => {  
  console.log(values); // [3, 'foo', 'bar']  

});

Promise.race示例：

javascript

const promise1 = new Promise((resolve, reject) => setTimeout(resolve, 500, 'one'));  
const promise2 = new Promise((resolve, reject) => setTimeout(resolve, 100, 'two'));  
 
Promise.race([promise1, promise2]).then((value) => {  
  console.log(value); // "two"  

    });

總結(jié)

Promise.all和Promise.race在處理多個(gè)Promise對(duì)象時(shí)提供了不同的機(jī)制。Promise.all適用于需要等待所有異步操作都成功完成的場(chǎng)景，而Promise.race則適用于只關(guān)心第一個(gè)完成的異步操作的場(chǎng)景。了解它們之間的區(qū)別對(duì)于在JavaScript中編寫高效、可靠的異步代碼至關(guān)重要。

您可能感興趣的文章: