JavaScript Promise.any() 静态方法
您将学习如何使用 JavaScript Promise.any() 方法来聚合 Promise
在本教程中，您将学习如何使用 JavaScript Promise.any() 方法来编写 Promise。
JavaScript Promise.any() 方法介绍
Promise.any() 静态方法接受一个 Promise 可迭代对象列表参数：
Promise.any(iterable);如果可迭代对象中的 Promise 之一得到解决，则 Promise.any() 返回一个 Promise，此 Promise 解析为一个值，此值是已解决的 Promise 的结果：
在此图中：
promise1在t1时返回v1值并解决。promise2在t2时返回v2值并解决。Promise.any()返回一个解析为v1值的 Promise，该值是promise1的结果
即使 Promise.any() 可迭代对象中的某些 Promise 被拒绝，它也会返回一个 Promise ，该 Promise 的值来自第一个得满足的 Promise：
在此图中：
promise1在t1时因error被拒绝。promise2在t2时返回v2的值得到满足。Promise.any()返回一个Promise，该Promise会返回值v2，它是promise2的结果。请注意，Promise.any()方法忽略被拒绝的承诺 。
如果可迭代对象中的所有承诺都被拒绝或者可迭代对象为空，则 Promise.any() 返回一个拒绝的承诺，其中 AggregateError 包含所有拒绝原因。AggregateError 是 Error 的子类。
在此图中：
promise1在t1时因error1被拒绝。promise2在t2时因error2被拒绝。Promise.any()返回一个被拒绝的承诺，其中AggregateError包含所有被拒绝的 promise 的error1和error2。
JavaScript Promise.any() 示例
让我们举一些使用 Promise.any() 方法的例子。
所有 Promise 都解决的例子
下面示例展示 Promise.any() 已解决所有 Promise 的方法：
const p1 = new Promise((resolve, reject) => {
setTimeout(() => {
console.log('Promise 1 fulfilled');
resolve(1);
}, 1000);
});
const p2 = new Promise((resolve, reject) => {
setTimeout(() => {
console.log('Promise 2 fulfilled');
resolve(2);
}, 2000);
});
const p = Promise.any([p1, p2]);
p.then((value) => {
console.log('Returned Promise');
console.log(value);
});
输出：
Promise 1 fulfilled
Returned Promise
1
Promise 2 fulfilled- 首先，创建一个新的 promise
p1，它将在一秒钟后解析为一个值1。 - 其次，创建一个新的 promise
p2，它将在两秒后解析为一个值2。 - 第三，使用
Promise.any()使用两个 promisep1和 的方法p2。Promise.any()返回一个 promisep，该 promise 将在一秒后解析为第一个已实现的 promise (p1) 的值1。
一个 promise 被拒绝的例子
下面示例展示使用 Promise.any() 具有拒绝 Pormise 的方法：
const p1 = new Promise((resolve, reject) => {
setTimeout(() => {
console.log('Promise 1 rejected');
reject('error');
}, 1000);
});
const p2 = new Promise((resolve, reject) => {
setTimeout(() => {
console.log('Promise 2 fulfilled');
resolve(2);
}, 2000);
});
const p = Promise.any([p1, p2]);
p.then((value) => {
console.log('Returned Promise');
console.log(value);
});
输出：
Promise 1 rejected
Promise 2 fulfilled
Returned Promise
2在此示例中，Promise.any() 忽略被拒绝的承诺。当 p2 以值 2 解决时，Promise.any() 返回一个 Promise ，该 Promise 解析为与 p2 的结果相同的值。
所有 Promise 被拒绝的例子
下面示例展示 Promise.any() 在拒绝所有 Promise 的情况：
const p1 = new Promise((resolve, reject) => {
setTimeout(() => {
console.log('Promise 1 rejected');
reject('error1');
}, 1000);
});
const p2 = new Promise((resolve, reject) => {
setTimeout(() => {
console.log('Promise 2 rejected');
reject('error2');
}, 2000);
});
const p = Promise.any([p1, p2]);
p.catch((e) => {
console.log('Returned Promise');
console.log(e, e.errors);
});
输出：
Promise 1 rejected
Promise 2 rejected
Returned Promise
[AggregateError: All promises were rejected] [ 'error1', 'error2' ]在此示例中，p1 和 p2 均被 error1 和 error2 拒绝。因此，Promise.any() 方法被一个 AggregateError 对象拒绝，AggregateError 对象的 errors 属性包含被拒绝 promise 的所有错误。
何时使用 JavaScript Promise.any() 方法
实际上，您使用 Promise.any() 返回第一个解决的 Promise。一旦一个 promise 被解决，Promise.any() 方法就不会等待其他 promise 完成。
例如，您有一个资源由两个或多个内容分发网络 CDN 提供服务。要动态加载第一个可用资源，您可以使用 Promise.any() 方法。
下面的示例展示如何使用 Promise.any() 方法获取两个张图片并显示第一个可用图片。
index.html 文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>JavaScript Promise.any() Demo</title>
</head>
<body>
<script src="js/app.js"></script>
</body>
</html>app.js 文件
function getImageBlob(url) {
return fetch(url).then((response) => {
if (!response.ok) {
throw new Error(`HTTP status: ${response.status}`);
}
return response.blob();
});
}
let cat = getImageBlob(
'https://upload.wikimedia.org/wikipedia/commons/4/43/Siberian_black_tabby_blotched_cat_03.jpg'
);
let dog = getImageBlob(
'https://upload.wikimedia.org/wikipedia/commons/a/af/Golden_retriever_eating_pigs_foot.jpg'
);
Promise.any([cat, dog])
.then((data) => {
let objectURL = URL.createObjectURL(data);
let image = document.createElement('img');
image.src = objectURL;
document.body.appendChild(image);
})
.catch((e) => {
console.log(e.message);
});
- 首先，定义
getImageBlob()使用 fetch API 从 URL 获取图像 blob的函数。getImageBlob()返回Promise，该Promise的值是图像的 blob 对象。 - 其次，定义两个加载图像的
Promise。 - 最后，使用
Promise.any()方法显示第一个可用图像。
结论
- 使用 JavaScript
Promise.any()方法获取Promise列表并返回首先实现的Promise。
