Recommandations associées : "Tutoriel vidéo javascript"
Depuis sa sortie en 1996, JS ne cesse de s'améliorer. Avec de nombreuses améliorations dans les versions ECMAScript, la version la plus récente est ES2020. Une mise à jour importante de JS est Promise, publiée sous le nom ES6 en 2015.
Définition MDN de Promise : les objets Promise sont utilisés pour représenter l'achèvement final (ou l'échec) d'une opération asynchrone et sa valeur de résultat. Cela peut paraître un peu trop compliqué pour les débutants.
Un aîné étranger a expliqué Promises ainsi : "Imaginez que vous êtes un enfant. Votre mère vous promet qu'elle vous achètera un nouveau téléphone portable la semaine prochaine
Vous ne le ferez pas." découvrez si vous recevez ce téléphone avant la semaine prochaine. Soit votre mère vous achètera un tout nouveau téléphone, soit elle ne vous l'achètera pas parce qu'elle est mécontente.
C'en est unPromise. Un Promise a trois états. Ils sont :
C'est le moyen le plus rapide de comprendre l'exemple de Promise que j'ai entendu jusqu'à présent.
Si vous n’avez pas encore commencé à apprendre Promise, je vous recommande de le faire.
Promise contient plusieurs méthodes intégrées très utiles. Aujourd'hui, nous présentons principalement ces deux méthodes.
Promise.race() - Sorti avec ES6 Promise.any() - Toujours en proposition de phase 4 comme paramètre. La méthode Promise.race()iterable
de l'itérateur est résolu ou rejeté. Promise.race(iterable)promise Contrairement à la méthode
se concentre sur la question de savoir si la promesse a été résolue, qu'elle ait été résolue ou rejetée. Promise.any()Promise.race()Syntaxe
Promise.race(iterable)
. iterableSymbol.iteratorValeur de retour
Chaque fois qu'une promesse dans une itération donnée est résolue ou rejetée, prend la valeur de la première promesse comme valeur, analysant ou rejetant ainsi de manière asynchrone (une fois la pile vide). Remarque
renverra le premier objet non promis transmis. Cela est principalement dû au fait que le comportement de la méthode est de renvoyer la valeur dès que la valeur est disponible (lorsque la promesse est satisfaite). iterablerace De plus, si une promesse déjà résolue est transmise dans
sera résolue à la première de cette valeur. Si un iterable vide est passé, la méthode Promise.race() sera toujours en attente. IterableraceExemples
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拒绝Il est très courant d'utiliser l'animation de chargement en développement. Lorsque le temps de réponse des données est long, si l'animation de chargement n'est pas utilisée, il semblera qu'il n'y a pas de réponse. Mais parfois, la réponse est trop rapide. Nous devons ajouter un très petit délai lors du chargement de l'animation, ce qui donnera l'impression à l'utilisateur que je demande fréquemment. Pour y parvenir, utilisez simplement la méthode
comme indiqué ci-dessous.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.race()Promesse annulée Dans certains cas, nous devons annuler la promesse. Dans ce cas, nous pouvons également utiliser la méthode
: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);Promise.race()Requêtes par lots pour une exécution longueChris Jensen
a un cas d'utilisation intéressant pour la méthode . Il a utilisé la méthode pour regrouper les requêtes de longue durée. De cette façon, ils peuvent maintenir le nombre de requêtes parallèles fixe. 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.race()Promise.any() reçoit un objet itérable, et tant que l'un des Promise.any() réussit, il renvoie le Promise réussi. Si aucun des promise de l'objet itérable ne réussit (c'est-à-dire que tous les promise échouent/rejetent), une promesse échouée et une instance de type promise sont renvoyées. Il s'agit d'une sous-classe d'Error et est utilisée pour la conversion. une seule erreur est regroupée. Essentiellement, cette méthode est à l’opposé de promises. AggregateError
注意！ 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
更多编程相关知识，请访问：编程入门！！
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
