在前端开发过程中，我们经常需要处理异步操作。在 JavaScript 中，Promise 是一种非常常见的用于处理异步操作的技术。使用 Promise 可以避免回调地狱，并使代码更易于阅读和维护。然而，在某些情况下，我们需要等待一个 Promise 完成后才能返回结果。在本文中，我们将探讨这些情况，并介绍如何等待一个 Promise 完成后再返回值。
等待一个 Promise 完成
在 JavaScript 中，Promise 代表了一个异步操作的最终结果。当我们需要等待一个 Promise 完成时，可以使用 then() 方法。该方法允许我们注册一个回调函数，该函数在 Promise 成功（resolved）时执行。例如，假设我们有一个返回 Promise 的函数：
function fetchData() {
return fetch('/data.json').then(response => response.json());
}如果我们想要等待 fetchData() 函数的结果，我们可以使用 then() 方法：
fetchData().then(data => {
console.log(data);
});在上面的代码中，data 是 fetchData() 返回的结果。当 Promise 被解决时，then() 方法被调用并传入结果。这是一个非常有用的技巧，但有时我们需要在返回结果之前等待 Promise 完成。
使用 async/await 等待 Promise
使用 then() 方法可以等待一个 Promise 完成，但它也会创建回调地狱。为了避免这种情况，我们可以使用 async/await。
async/await 是 ECMAScript 2017 引入的一项新功能。它使异步代码看起来像同步代码，并使代码更易于编写和维护。要使用 async/await，只需在函数前面添加 async 关键字，并使用 await 表达式等待 Promise 的解决。例如，假设我们有一个返回 Promise 的函数：
function fetchData() {
return fetch('/data.json').then(response => response.json());
}我们可以使用 async/await 等待该 Promise：
-- -------------------- ---- ------- ----- -------- --------- - ----- ---- - ----- ------------ ------------------ ------ ----- - ------------------- -- - ---------------- ------- ------ ---
在上面的代码中，getData() 函数被标记为 async，这意味着它返回一个 Promise。在函数中，我们使用 await 表达式等待 fetchData() 返回结果。当 Promise 完成时，我们将结果存储在 data 变量中，并在控制台中打印它。最后，我们返回值并在外部使用 then() 方法处理结果。
在循环中使用 async/await
有时，我们需要在循环中等待 Promise 完成。在这种情况下，我们不能使用普通的 for 循环，因为它不会等待 Promise 完成就继续执行。相反，我们可以使用 for...of 循环，并在循环体中使用 async/await。
例如，假设我们有一个返回 Promise 的函数，该函数需要一个参数并返回数字：
function fetchData(number) {
return new Promise(resolve => {
setTimeout(() => resolve(number * 2), 1000);
});
}如果我们想要等待 Promise 完成后再处理结果，我们可以使用 for...of 循环和 async/await：
-- -------------------- ---- -------
----- -------- ----------------------- -
--- ------ ------ -- -------- -
----- ------ - ----- ------------------
--------------------
-
-
------------------ -- ----------- -- -
---------------- --------
---在上面的代码中，processNumbers() 函数接受一个数组并使用 for...of 循环遍历它。在每次迭代中，我们使用 await 表达
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/13251