使用 Promise 返回值填充数组：JavaScript 异步编程实践

本文旨在解决在 JavaScript 中如何正确地从 Promise 中提取数值，并将其用于后续数组定义的问题。核心在于理解 Promise 的异步特性，以及如何使用 .then() 方法来处理 Promise 的返回值，确保在数组创建时，数值已经准备就绪。同时，避免 top-level-await 带来的潜在问题，提供一种稳健且兼容性良好的解决方案。

在 JavaScript 中，处理异步操作是常见的任务。当我们需要从一个 Promise 中获取数值，并将其用于后续的代码，例如填充数组时，需要特别注意 Promise 的异步特性。直接将 Promise 对象赋值给数组元素会导致数组包含的是一个 Promise，而不是 Promise 的返回值。

解决这个问题的关键在于使用 .then() 方法。.then() 方法允许我们在 Promise resolve 后执行回调函数，从而获取 Promise 的返回值。

示例代码：

立即学习“Java免费学习笔记（深入）”；

假设我们有一个名为 all_kdm_coverage 的 Promise，它最终会返回一个数值。我们想要使用这个数值来创建一个包含 coverage 属性的数组。以下是正确的做法：

const scrolls = [];

all_kdm_coverage.then(coverage => {
  scrolls.push({
    title: "Kadena de Mano",
    link: "./Kdm",
    coverage: coverage
  });

  // 在这里使用 scrolls 数组，确保数据已加载
  console.log("scrolls:", scrolls);
});

// 注意：在这里 scrolls 数组可能还是空的，因为 Promise 尚未 resolve
console.log("scrolls (可能为空):", scrolls);

代码解释：

BetterYeah AI

基于企业知识库构建、训练AI Agent的智能体应用开发平台，赋能客服、营销、销售场景 -BetterYeah

110

查看详情

1. 初始化数组: 首先，我们创建一个空的 scrolls 数组。
2. .then() 方法: 我们使用 all_kdm_coverage.then() 方法，传入一个回调函数。这个回调函数会在 all_kdm_coverage Promise resolve 后执行。
3. 获取返回值: 回调函数的参数 coverage 就是 all_kdm_coverage Promise resolve 后的返回值。
4. 填充数组: 在回调函数内部，我们使用 scrolls.push() 方法向数组中添加一个新的对象，并将 coverage 值赋给对象的 coverage 属性。
5. 异步特性： 注意，scrolls.push() 发生在 Promise resolve 之后，因此确保了 coverage 属性的值是 Promise 的返回值，而不是 Promise 对象本身。
6. 使用数组： 重要的是，在 .then() 回调函数 内部 使用 scrolls 数组。这是因为 Promise 是异步的，在 .then() 之外的代码可能会在 Promise resolve 之前执行，导致数组为空。

避免使用 top-level-await：

虽然可以使用 await 关键字来等待 Promise resolve，但在模块的顶层作用域（top-level）使用 await 可能会导致错误，如示例中提到的 "The top-level-await experiment is not enabled"。 因此，推荐使用 .then() 方法来处理 Promise 的返回值，以获得更好的兼容性。

注意事项：

• 异步操作： 务必理解 Promise 的异步特性。Promise resolve 需要时间，因此不能假设 Promise 的返回值会立即可用。
• 回调函数： 使用 .then() 方法提供的回调函数来处理 Promise 的返回值。
• 作用域： 在 .then() 回调函数内部使用从 Promise 获取的数据，确保数据已加载。
• 错误处理： 可以使用 .catch() 方法来处理 Promise rejected 的情况，例如 all_kdm_coverage.then(...).catch(error => console.error("Error:", error))。

总结：

通过使用 .then() 方法，我们可以安全地从 Promise 中提取数值，并将其用于后续的代码，例如填充数组。 这种方法避免了 top-level-await 带来的潜在问题，并确保了代码的兼容性和可维护性。 记住，理解 Promise 的异步特性是解决此类问题的关键。

以上就是使用 Promise 返回值填充数组：JavaScript 异步编程实践的详细内容，更多请关注php中文网其它相关文章！