相關推薦：《javascript影片教學》
#自1996年發布以來，JS 一直在穩步改進。隨著ECMAScript版本的許多改進，最近的版本是ES2020。 JS 的一個重要更新是Promise，在2015年,它以 ES6 的名義發布。
MDN 上對 Promise 的定義：Promise 物件用於表示一個非同步操作的最終完成 (或失敗)及其結果值。對於新手來說，這聽起來可能有點太複雜了。
國外一位大什麼對Promises的解釋如下：“想像一下你是個孩子。你老媽向你保證，她下週會給你買一部新手機。”
你要等到下週才能知道你是否能拿到那支手機。你老媽要嘛真的給你買了一個全新的手機，要嘛因為你不開心就不買給你。
這個就是一個Promise。一個Promise有三個狀態。分別是：
這個是我目前聽到，最快能理解Promise 事例。
如果你還沒開始學習 Promise ，建議你這麼做。
Promise包含幾種非常有用的內建方法。今天我們主要介紹這兩種方法。
Promise.race()-與ES6 一起發布Promise.any() -仍處於第4階段的提案中Promise.race()方法最初是在ES6 中引入Promise 時發布的，這個方法需要一個iterable作為參數。
Promise.race(iterable) 方法傳回一個 promise，一旦迭代器中的某個promise解決或拒絕，傳回的 promise 就會解決或拒絕。
與Promise.any()方法不同，Promise.race()方法主要關注 Promise 是否已解決，而不管其被解決還是被拒絕。
Promise.race(iterable)
iterable — 可迭代對象，類似 Array。 iterable 物件實作Symbol.iterator方法。
一個待定的 Promise 只要給定的迭代中的一個promise解決或拒絕，就採用第一個promise的值作為它的值，從而非同步地解析或拒絕（一旦堆疊為空）。
因為參數接受iterable，所以我們可以傳遞一些值，像是基本值，甚至陣列中的物件。在這種情況下，race方法將傳回傳遞的第一個非 promise 物件。這主要是因為方法的行為是在值可用時(當 promise 滿足時)立即傳回值。
此外，如果在iterable中傳遞了已解決的Promise，則Promise.race()方法將解析為該值的第一個。如果傳遞了一個空的Iterable，則race#方法將永遠處於待處理狀態。
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拒绝現在，你可能會想知道，我們在實戰中何時 Promise.race() ？來看看。
在請求資料時，顯示載入動畫
使用載入動畫開發是非常常見。當資料回應時間較長時，如果沒有使用載入動畫，看起來就像沒有回應一樣。但有時，回應太快了，我們需要載入動畫時，增加一個非常小延遲時間，這會讓使用者覺得我是在經常要求過來的。要實現這一點，只需使用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);批次請求，用於長時間執行
Chris Jensen 有一個有趣的race()方法用例。他曾使用Promise.race()方法批次長時間運行的請求。這樣一來，他們可以保持並行請求的數量固定。
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可迭代對象，只要其中的一個promise 成功，就回傳那個已經成功的promise 。如果可迭代物件中沒有一個promise 成功（即所有的promises 都失敗/拒絕），就傳回一個失敗的promise 和AggregateError類型的實例，它是Error 的一個子類，用來把單一的錯誤集合在一起。本質上，這個方法和Promise.all()是相反的。
注意！ Promise.any() 方法依然是实验性的，尚未被所有的浏览器完全支持。它当前处于 TC39 第四阶段草案（Stage 4）
Promise.any(iterable);
iterable — 个可迭代的对象, 例如 Array。
Promise。promise 变成成功（resolve）状态，或者其中的所有的 promises 都失败，那么返回的 promise 就会 异步地（当调用栈为空时） 变成成功/失败（resolved/reject）状态。这个方法用于返回第一个成功的 promise 。只要有一个 promise 成功此方法就会终止，它不会等待其他的 promise 全部完成。
不像 Promise.all() 会返回一组完成值那样（resolved values），我们只能得到一个成功值（假设至少有一个 promise 完成）。当我们只需要一个 promise 成功，而不关心是哪一个成功时此方法很有用的。
同时, 也不像 Promise.race() 总是返回第一个结果值（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()主要关注解析的值。 它会忽略在100毫秒时拒绝的promise1，并考虑在400毫秒后解析的promise2的值。
从最快的服务器检索资源
假设访问我们网站的用户可能来自全球各地。如果我们的服务器基于单个位置，那么响应时间将根据每个用户的位置而不同。但是如果我们有多个服务器，可以使用能够产生最快响应的服务器。在这种情况下，可以使用Promise.any()方法从最快的服务器接收响应。
原文地址：https://blog.bitsrc.io/introduction-to-promise-race-and-promise-any-with-real-life-examples-9d8d1b9f8ec9
作者：Mahdhi Rezvi
译文地址：https://segmentfault.com/a/1190000038475001
更多编程相关知识，请访问：编程入门！！
以上是了解Promise.race() 和 Promise.any()的使用方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！
