當(dāng)我們需要同時發(fā)起多個異步請求并在其中任意一個請求完成后得到響應(yīng)時材原,可以使用 Promise.race() 方法显歧。
Promise.race() 方法接收一個包含多個 Promise 對象的可迭代對象铛嘱,并返回一個新的 Promise 對象嗡午,該 Promise 對象在多個 Promise 中任意一個 Promise 對象狀態(tài)變?yōu)?fulfilled 或 rejected 時立即返回該 Promise 對象的值或原因熊经。
下面是一個簡單的例子:
const promise1 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('Promise 1 resolved');
}, 1000);
});
const promise2 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('Promise 2 resolved');
}, 2000);
});
Promise.race([promise1, promise2]).then(result => {
console.log(result); // "Promise 1 resolved"
});
在上述例子中呕诉,我們創(chuàng)建了兩個 Promise 對象并使用 Promise.race() 方法來獲取其中任何一個 Promise 對象的解決結(jié)果覆劈。在本例中保礼,由于 promise1 對象的解決時間比 promise2 對象的解決時間早,因此 Promise.race() 方法的結(jié)果為 Promise 1 resolved责语。
Promise.race() 方法的應(yīng)用場景
Promise.race() 方法適用于多個異步請求之間的競爭場景炮障。如果我們需要同時向多個 API 發(fā)送請求,但是只有一個請求的響應(yīng)時間是關(guān)鍵的坤候,那么我們可以使用 Promise.race() 方法來優(yōu)化請求時間胁赢,提高效率。
下面是一個例子铐拐,假設(shè)我們需要從兩個 API 中獲取數(shù)據(jù)徘键,并返回響應(yīng)時間較短的數(shù)據(jù):
const fetchFromAPI1 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('Data from API 1');
}, 1000);
});
const fetchFromAPI2 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('Data from API 2');
}, 500);
Promise.race([fetchFromAPI1, fetchFromAPI2]).then(result => {
console.log(result); // "Data from API 2"
});
在上述例子中,由于 fetchFromAPI2 的解決時間比 fetchFromAPI1 的解決時間早遍蟋,因此 Promise.race() 方法的結(jié)果為 Data from API 2吹害。
在使用 Promise.race() 方法時,如果任何一個 Promise 對象的狀態(tài)變?yōu)?rejected虚青,那么 Promise.race() 方法會立即返回該 Promise 對象的原因它呀。因此,我們需要注意錯誤處理棒厘。
下面是一個例子纵穿,在該例子中,我們使用 Promise.race() 方法來獲取兩個 Promise 對象的解決結(jié)果奢人,并使用 .catch() 方法來捕獲錯誤:
const promise1 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('Promise 1 resolved');
}, 2000);
});
const promise2 = new Promise((resolve, reject) => {
setTimeout(() => {
reject('Promise 2 rejected');
}, 1000);
});
Promise.race([promise1, promise2])
.then((result) => {
console.log(result); // "Promise 1 resolved"
})
.catch((error) => {
console.error(error); // "Promise 2 rejected"
});
在上述例子中谓媒,由于 promise2 的狀態(tài)變?yōu)?rejected,因此 Promise.race() 方法的結(jié)果為 Promise 2 rejected何乎,并且該結(jié)果被 .catch() 方法捕獲句惯。 Promise.race() 方法的使用技巧 以下是一些使用 Promise.race() 方法的技巧:
Promise.race() 添加超時功能
我們可以使用 Promise.race() 方法來添加超時功能。例如支救,如果我們向某個 API 發(fā)送請求抢野,但是該 API 的響應(yīng)時間過長,我們可以使用 Promise.race() 方法來設(shè)置請求的超時時間各墨。 下面是一個例子指孤,我們使用 Promise.race() 方法來發(fā)送請求并在 3 秒內(nèi)獲取響應(yīng)。如果請求未能在 3 秒內(nèi)完成,我們將返回超時錯誤:
const timeout = new Promise((resolve, reject) => {
setTimeout(() => {
reject('Request timed out');
}, 3000);
});
const fetchFromAPI = new Promise((resolve, reject) => {
// 發(fā)送 API 請求
});
Promise.race([fetchFromAPI, timeout])
.then((result) => {
console.log(result); // 請求成功
})
.catch((error) => {
console.error(error); // 請求超時
});
在上述例子中恃轩,我們設(shè)置了一個 3 秒的超時時間结洼,并將其作為一個 Promise 對象傳遞給 Promise.race() 方法。如果請求能夠在 3 秒內(nèi)完成详恼,則返回響應(yīng)結(jié)果补君;否則返回超時錯誤。