数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化学
生物
数学
英语
经济学
心理学
社会学
时尚研究
法学研究在 JavaScript 中使用 async-await 解释 Promise.all？
像加两个数字或字符串操作这样的简单操作在 JavaScript 中顺序执行并立即返回结果。但在为现实世界的应用程序编写代码时，我们经常会进行耗时的数据库调用、API 调用和其他应用程序调用。这些较长的调用不会立即返回结果；它们会返回一个 Promise。
Promise 是一个对象，用于表示异步操作的未来结果。它用于处理异步进程最终的成功或失败。例如，如果您在 JavaScript 中从 API 请求某些对象，您将获得一个 Promise，表示该任务最终会完成或失败。一段时间后，您将获得 Promise 的结果，无论它是 fulfilled 还是 rejected。
Promise.all()
Promise.all() 是一种方法，它接受多个 Promise 作为输入并返回单个 Promise。
Promise 在处理 JavaScript 中进程的异步特性方面非常有效。
如果所有输入的 Promise 都已 fulfilled 且没有被拒绝，则结果将是一个单个 Promise，其中包含来自输入 Promise 的结果值的数组。
如果任何输入的 Promise 被拒绝，那么我们将立即得到一个被拒绝的 Promise，其中包含 Promise 拒绝中提到的原因。它不会给我们剩余成功或已解决的 Promise 的结果。
由于 Promise 的结果是一个可迭代的数组，因此我们可以运行循环并根据需要执行操作。
语法
用户可以使用以下语法在 JavaScript 中使用 Promise.all()。
Promise.all([promise1, promise2, promise3, ….])
Promise.all() 接受一个数组可迭代对象作为输入。输入数组可以包含所有 Promise 或对象。
Async-await
async 关键字用于声明异步函数，“await”关键字可以在该函数的主体中使用。async 和 await 关键字一起以更简洁的代码显示异步进程行为。
通常，async 函数将具有任意数量的 await 语句或没有 await 语句。与 try-catch 块相比，async-await 关键字提供了更简洁的代码。async 关键字使 JavaScript 函数返回一个 Promise，“await”关键字用于等待 Promise。
语法
async function function_name{
let result = await (value);
. . . . . . .
. . . . . . .
}
现在我们已经了解了 promise.all() 和 async-await 关键字。让我们看看在 JavaScript 中一起使用 async-await 和 promise.all() 的方法。
Promise.all 与 async-await
在 JavaScript 中使用 Promise.all 方法和 async-await 的语法如下
语法
在 JavaScript 中使用 Promise.all 方法和 async-await 的语法如下：
async function example() {
try {
const results = await Promise.all([promise1, promise2, ...]);
} catch (error) {
// handle error
}
}
这里promise1、promise2 等是你想要等待的 Promise。如果所有输入的 Promise 都已 fulfilled，则 Promise.all 方法返回一个已 fulfilled 的 Promise，其中包含所有输入 Promise 值的数组。如果任何输入的 Promise 被拒绝，则 Promise.all Promise 将被拒绝，原因是第一个被拒绝的 Promise。
async 函数示例使用 try/catch 语句来处理错误情况，如果任何输入的 Promise 被拒绝，则执行 catch 块。
示例 1
让我们以 Instagram 等社交媒体平台为例。可以在 Instagram 上执行某些操作，包括点赞、评论和分享。因此，让我们为点赞、评论和分享等操作创建三个 Promise。让我们使用promise.all()以及 async 和 await 关键字从其他函数访问这些 Promise。
<html>
<body>
<h2> Using the <i> Promise.all() </i> Method</h2>
<p id="output"> </p>
<script>
let like_promise = () => {
return new Promise((resolve, reject) => {
resolve("Liked ");
});
};
let comment_promise = () => {
return new Promise((resolve, reject) => {
resolve("commented ");
});
};
let share_promise = () => {
return new Promise((resolve, reject) => {
resolve("shared ");
});
};
let main_promise = async () => {
let result = await Promise.all([like_promise(), comment_promise(), share_promise(), ]);
document.getElementById("output").innerHTML = result
};
main_promise();
</script>
</body>
</html>
让我们来看一个当 Promise 被拒绝时的例子，如果我们考虑一个将博客发布到网站的场景。发布的三个情况是：已发布博客、正在进行的博客和已删除的博客。让我们拒绝已删除博客情况下的 Promise 并观察输出。
在 JavaScript 中创建此示例的步骤如下。
步骤 1 - 在 JavaScript 中创建一个 post 函数，该函数应该返回一个已 fulfilled 的 Promise。
步骤 2 - 在 JavaScript 中创建一个 progress 函数，该函数也应该返回一个已 fulfilled 的 Promise。
步骤 3 - 在 JavaScript 中创建一个 del 函数，在调用时拒绝 Promise。
步骤 4 - 在 JavaScript 中创建一个异步函数，该函数使用promise.all()通过 await 关键字等待所有 Promise。当从promise.all()调用 del 函数时，输出是一个错误，拒绝消息为“post deleted”。
示例 2
<html>
<h2> Using the Promise.all() Method with async-await</h2>
<body>
<p id="output"> </p>
<script>
let post = () => {
return new Promise((resolve, reject) => {
resolve("blog posted");
});
};
let progress = () => {
return new Promise((resolve, reject) => {
resolve("blog in progress");
})
};
let del = () => {
return new Promise((resolve, reject) => {
reject("rejected promise");
});
};
let blog_promise = async () => {
try {
let result = await Promise.all([progress(), post(), del()]);
document.getElementById("output").innerHTML = result
} catch (error) {
document.getElementById("output").innerHTML = error
}
}
blog_promise();
</script>
</body>
</html>
我们学习了在 JavaScript 中使用 async-await 关键字的 promise.all() 的工作原理。本教程讨论了它们的使用方法以及两个实际案例，一个关于所有 Promise 都已 fulfilled 的情况，另一个关于 Promise 被拒绝的情况。
5K+ 次浏览
