JavaScript 异步编程：从 Promise 中提取值并在后续代码中使用-js教程-PHP中文网

JavaScript 异步编程：从 Promise 中提取值并在后续代码中使用

霞舞

发布： 2025-10-01 17:10:13

原创

521人浏览过

javascript 异步编程：从 promise 中提取值并在后续代码中使用

本文旨在解决在 JavaScript 异步编程中，如何从 Promise 对象中提取数值，并在后续代码（例如数组定义）中使用。通过详细的代码示例，展示了如何正确处理 Promise，并避免常见的 top-level-await 错误，确保异步操作的顺利进行，从而构建动态和响应迅速的应用程序。

处理 Promise 的正确姿势

在 JavaScript 中，Promise 代表一个异步操作的最终完成（或失败）及其结果值。直接将 Promise 对象赋值给变量并不能获得其内部的值，而需要在 Promise 完成后通过 .then() 方法来访问。

使用 .then() 方法

.then() 方法允许你在 Promise 成功解决（resolve）后执行一个回调函数。这个回调函数会接收到 Promise 解决的值，你可以在函数内部处理这个值，并将其用于后续的操作。

例如，假设我们有一个返回 Promise 的函数 getData()：

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

async function getData() {
  // 模拟异步操作
  return new Promise(resolve => {
    setTimeout(() => {
      resolve(42); // 假设异步操作返回数值 42
    }, 1000);
  });
}

登录后复制

为了获取 getData() 返回的数值，我们需要使用 .then()：

腾讯云AI代码助手

基于混元代码大模型的AI辅助编码工具

查看详情

getData().then(value => {
  console.log("Promise 的值为:", value); // 输出: Promise 的值为: 42
  // 在这里可以使用 value 进行后续操作
});

console.log("getData() 执行完毕"); // 这行代码会在 Promise resolve 之前执行

登录后复制

这段代码展示了异步操作的特性：console.log("getData() 执行完毕") 会在 Promise 解决之前执行，而 .then() 中的回调函数会在 Promise 解决后执行。

在数组定义中使用 Promise 的值

回到原始问题，如何在数组定义中使用从 Promise 中提取的值？一个常见错误是尝试使用 await 在数组字面量中，这通常会导致 top-level-await 错误，除非你的环境（例如 ES modules 在顶层）明确支持它。

正确的做法是，在 Promise 解决后，动态地修改数组。以下是一个示例：

async function GetCoverage(scroll_path) {
    // 模拟异步 API 调用
    return new Promise(resolve => {
        setTimeout(() => {
            const mockResponse = {
                Items: [
                    { Scroll: "kdm", Coverage: 95 }
                ]
            };
            resolve(mockResponse);
        }, 500);
    });
}

function GetScroll(scroll_name, scroll_array) {
    const scroll_data = scroll_array.find(scroll => scroll.Scroll === scroll_name);
    return scroll_data;
}

let dataGlobal;
const getData = () => (dataGlobal ??= GetCoverage("all"));

const all_kdm_coverage = getData().then(
    (data) => {
        const  kdm_entry = GetScroll("kdm", data.Items)
        const coverage = kdm_entry.Coverage
        console.log('kdm coverage:',coverage)
        return coverage
    }
);

const scrolls = [];

all_kdm_coverage.then(coverage => {
    scrolls.push({
        title: "Kadena de Mano",
        link: "./Kdm",
        coverage: coverage
    });
    console.log("scrolls 数组:", scrolls);
    // 在这里可以使用 scrolls 数组，例如渲染到 UI
});

登录后复制

在这个例子中，scrolls 数组首先被定义为空数组。然后，在 all_kdm_coverage Promise 解决后，我们使用 .then() 方法将包含 coverage 值的对象添加到 scrolls 数组中。