Promise.race和Promise.any使用示例詳解
什么是 Promise ?
自1996年發(fā)布以來,JS 一直在穩(wěn)步改進。隨著ECMAScript版本的許多改進,最近的版本是ES2020。JS 的一個重要更新是Promise,在2015年,它以 ES6 的名義發(fā)布。
MDN 上對 Promise 的定義:Promise 對象用于表示一個異步操作的最終完成 (或失敗)及其結(jié)果值。對于新手來說,這聽起來可能有點太復(fù)雜了。
國外一位大什么對Promises的解釋如下:“想象一下你是個孩子。 你老媽向你保證,她下周會給你買一部新手機。”
你要到下周才能知道你是否能獲取那部手機。你老媽要么真的給你買了一個全新的手機,要么因為不開心就不給你買。
這個就是一個Promise。 一個Promise有三個狀態(tài)。 分別是:
- Pending:你不知道你是否能得到那部手機
- Fulfilled:老媽高興了,給你買了
- Rejected:老娘不開森了,不給你買了
這個是我目前聽到,最快能理解 Promise 事例。
如果你還沒有開始學(xué)習(xí) Promise ,建議你這樣做。
Promise包含幾種非常有用的內(nèi)置方法。 今天我們主要介紹這兩種方法。
Promise.race()-與 ES6 一起發(fā)布Promise.any()-仍處于第4階段的提案中
Promise.race()
Promise.race()方法最初是在 ES6 中引入 Promise 時發(fā)布的,這個方法需要一個iterable作為參數(shù)。
Promise.race(iterable) 方法返回一個 promise,一旦迭代器中的某個promise解決或拒絕,返回的 promise 就會解決或拒絕。
與Promise.any()方法不同,Promise.race()方法主要關(guān)注 Promise 是否已解決,而不管其被解決還是被拒絕。
語法
Promise.race(iterable)
參數(shù)
iterable — 可迭代對象,類似 Array。 iterable 對象實現(xiàn)Symbol.iterator方法。
返回值
一個待定的 Promise 只要給定的迭代中的一個promise解決或拒絕,就采用第一個promise的值作為它的值,從而異步地解析或拒絕(一旦堆棧為空)。
注意
因為參數(shù)接受iterable,所以我們可以傳遞一些值,比如基本值,甚至數(shù)組中的對象。在這種情況下,race方法將返回傳遞的第一個非 promise 對象。這主要是因為方法的行為是在值可用時(當(dāng) promise 滿足時)立即返回值。
此外,如果在iterable中傳遞了已經(jīng)解決的Promise,則Promise.race()方法將解析為該值的第一個。 如果傳遞了一個空的Iterable,則race方法將永遠處于待處理狀態(tài)。
事例
const promise1 = new Promise((resolve, reject) => {
setTimeout(resolve, 500, 'promise 1 resolved');
});
const promise2 = new Promise((resolve, reject) => {
setTimeout(reject, 100, 'promise 2 rejected');
});
const promise3 = new Promise((resolve, reject) => {
setTimeout(resolve, 200, 'promise 3 resolved')
});
(async () => {
try {
let result = await Promise.race([promise1, promise2, promise3]);
console.log(result);
} catch (err) {
console.error(err);
}
})();
// 輸出- "promise 2 rejected"
// 盡管promise1和promise3可以解決,但promise2拒絕的速度比它們快。
// 因此Promise.race方法將以promise2拒絕真實用例
現(xiàn)在,你可能想知道,我們在實戰(zhàn)中何時 Promise.race() ? 來看看。
在請求數(shù)據(jù)時,顯示加載動畫
使用加載動畫開發(fā)中是非常常見。當(dāng)數(shù)據(jù)響應(yīng)時間較長時,如果沒使用加載動畫,看起來就像沒有響應(yīng)一樣。但有時,響應(yīng)太快了,我們需要加載動畫時,增加一個非常小延遲時間,這樣會讓用戶覺得我是在經(jīng)常請求過來的。要實現(xiàn)這一點,只需使用Promise.race()方法,如下所示。
function getUserInfo(user) {
return new Promise((resolve, reject) => {
// had it at 1500 to be more true-to-life, but 900 is better for testing
setTimeout(() => resolve("user data!"), Math.floor(900*Math.random()));
});
}
function showUserInfo(user) {
return getUserInfo().then(info => {
console.log("user info:", info);
return true;
});
}
function showSpinner() {
console.log("please wait...")
}
function timeout(delay, result) {
return new Promise(resolve => {
setTimeout(() => resolve(result), delay);
});
}
Promise.race([showUserInfo(), timeout(300)]).then(displayed => {
if (!displayed) showSpinner();
});取消的 Promise
有些情況下,我們需要取消 Promise,這時也可以借助 Promise.race() 方法:
function timeout(delay) {
let cancel;
const wait = new Promise(resolve => {
const timer = setTimeout(() => resolve(false), delay);
cancel = () => {
clearTimeout(timer);
resolve(true);
};
});
wait.cancel = cancel;
return wait;
}
function doWork() {
const workFactor = Math.floor(600*Math.random());
const work = timeout(workFactor);
const result = work.then(canceled => {
if (canceled)
console.log('Work canceled');
else
console.log('Work done in', workFactor, 'ms');
return !canceled;
});
result.cancel = work.cancel;
return result;
}
function attemptWork() {
const work = doWork();
return Promise.race([work, timeout(300)])
.then(done => {
if (!done)
work.cancel();
return (done ? 'Work complete!' : 'I gave up');
});
}
attemptWork().then(console.log);批處理請求,用于長時間執(zhí)行
Chris Jensen 有一個有趣的race()方法用例。 他曾使用Promise.race()方法批處理長時間運行的請求。 這樣一來,他們可以保持并行請求的數(shù)量固定。
const _ = require('lodash')
async function batchRequests(options) {
let query = { offset: 0, limit: options.limit };
do {
batch = await model.findAll(query);
query.offset += options.limit;
if (batch.length) {
const promise = doLongRequestForBatch(batch).then(() => {
// Once complete, pop this promise from our array
// so that we know we can add another batch in its place
_.remove(promises, p => p === promise);
});
promises.push(promise);
// Once we hit our concurrency limit, wait for at least one promise to
// resolve before continuing to batch off requests
if (promises.length >= options.concurrentBatches) {
await Promise.race(promises);
}
}
} while (batch.length);
// Wait for remaining batches to finish
return Promise.all(promises);
}
batchRequests({ limit: 100, concurrentBatches: 5 });Promise.any()
Promise.any() 接收一個Promise可迭代對象,只要其中的一個 promise 成功,就返回那個已經(jīng)成功的 promise 。如果可迭代對象中沒有一個 promise 成功(即所有的 promises 都失敗/拒絕),就返回一個失敗的 promise 和AggregateError類型的實例,它是 Error 的一個子類,用于把單一的錯誤集合在一起。本質(zhì)上,這個方法和Promise.all()是相反的。
注意! Promise.any() 方法依然是實驗性的,尚未被所有的瀏覽器完全支持。它當(dāng)前處于 TC39 第四階段草案(Stage 4)
語法
Promise.any(iterable);
參數(shù)
iterable — 個可迭代的對象, 例如 Array。
返回值
- 如果傳入的參數(shù)是一個空的可迭代對象,則返回一個 已失?。╝lready rejected) 狀態(tài)的
Promise。 - 如果傳入的參數(shù)不包含任何 promise,則返回一個 異步完成 (asynchronously resolved)的 Promise。
- 其他情況下都會返回一個處理中(pending) 的 Promise。 只要傳入的迭代對象中的任何一個
promise變成成功(resolve)狀態(tài),或者其中的所有的promises都失敗,那么返回的promise就會 異步地(當(dāng)調(diào)用棧為空時) 變成成功/失敗(resolved/reject)狀態(tài)。
說明
這個方法用于返回第一個成功的 promise 。只要有一個 promise 成功此方法就會終止,它不會等待其他的 promise 全部完成。
不像 Promise.all() 會返回一組完成值那樣(resolved values),我們只能得到一個成功值(假設(shè)至少有一個 promise 完成)。當(dāng)我們只需要一個 promise 成功,而不關(guān)心是哪一個成功時此方法很有用的。
同時, 也不像 Promise.race() 總是返回第一個結(jié)果值(resolved/reject)那樣,這個方法返回的是第一個 成功的 值。這個方法將會忽略掉所有被拒絕的 promise,直到第一個 promise 成功。
事例
const promise1 = new Promise((resolve, reject) => {
setTimeout(reject, 100, 'promise 1 rejected');
});
const promise2 = new Promise((resolve, reject) => {
setTimeout(resolve, 400, 'promise 2 resolved at 400 ms');
});
const promise3 = new Promise((resolve, reject) => {
setTimeout(resolve, 700, 'promise 3 resolved at 800 ms');
});
(async () => {
try {
let value = await Promise.any([promise1, promise2, promise3]);
console.log(value);
} catch (error) {
console.log(error);
}
})();
//Output - "promise 2 resolved at 400 ms"從上面代碼注意到Promise.any()主要關(guān)注解析的值。 它會忽略在100毫秒時拒絕的promise1,并考慮在400毫秒后解析的promise2的值。
真實用例
從最快的服務(wù)器檢索資源
假設(shè)訪問我們網(wǎng)站的用戶可能來自全球各地。如果我們的服務(wù)器基于單個位置,那么響應(yīng)時間將根據(jù)每個用戶的位置而不同。但是如果我們有多個服務(wù)器,可以使用能夠產(chǎn)生最快響應(yīng)的服務(wù)器。在這種情況下,可以使用Promise.any()方法從最快的服務(wù)器接收響應(yīng)。
我是小智,我們下期再見!
代碼部署后可能存在的BUG沒法實時知道,事后為了解決這些BUG,花了大量的時間進行l(wèi)og 調(diào)試,這邊順便給大家推薦一個好用的BUG監(jiān)控工具 Fundebug。
以上就是Promise.race和Promise.any使用示例詳解的詳細內(nèi)容,更多關(guān)于Promise.race Promise.any的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
JavaScript實現(xiàn)公歷轉(zhuǎn)農(nóng)歷功能示例
這篇文章主要介紹了JavaScript實現(xiàn)公歷轉(zhuǎn)農(nóng)歷功能,涉及javascript日期與時間相關(guān)操作及運算操作技巧,需要的朋友可以參考下2017-02-02
Electron點擊穿透不規(guī)則窗體的透明區(qū)域的實現(xiàn)
本文主要介紹了Electron點擊穿透不規(guī)則窗體的透明區(qū)域的實現(xiàn),文中通過示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2021-09-09
使用JavaScript獲取Django模板指定鍵值數(shù)據(jù)
這篇文章主要介紹了使用JavaScript獲取Django模板指定鍵值數(shù)據(jù),文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-05-05
詳解使用fetch發(fā)送post請求時的參數(shù)處理
這篇文章主要介紹了詳解使用fetch發(fā)送post請求時的參數(shù)處理的相關(guān)資料,需要的朋友可以參考下2017-04-04

