使用 Promise 返回值填充数组的最佳实践-js教程-PHP中文网

使用 Promise 返回值填充数组的最佳实践

碧海醫心

发布： 2025-10-01 16:56:43

原创

992人浏览过

使用 promise 返回值填充数组的最佳实践

本文旨在讲解如何正确地从 Promise 中提取数值，并将其用于后续数组的定义。通过异步获取数据并处理后，我们常常需要将结果用于构建数组。本文将提供一种可靠的方法，避免常见的 top-level-await 错误，确保数据以期望的方式集成到数组中。

在 JavaScript 中，当处理异步操作时，例如数据库查询或 API 调用，通常会使用 Promise。Promise 代表一个异步操作的最终完成（或失败）及其结果值。然而，直接在数组定义中使用 Promise 可能会导致问题，因为 Promise 的值在 Promise resolve 之前是不可用的。

理解问题

假设我们有一个 Promise all_kdm_coverage，它最终会返回一个数值。我们想将这个数值用于定义一个数组 scrolls 的元素：

const scrolls = [
    {
        title: "Kadena de Mano",
        link: "./Kdm",
        coverage: all_kdm_coverage // 这里 all_kdm_coverage 是一个 Promise
    },
]

登录后复制

直接使用 Promise 作为 coverage 的值会导致 coverage 属性成为一个 Promise 对象，而不是我们期望的数值。尝试使用 await 在数组定义中，如：

const scrolls = [
    {
        title: "Kadena de Mano",
        link: "./Kdm",
        coverage: await all_kdm_coverage // 尝试使用 await
    },
]

登录后复制

可能会导致 top-level-await 错误，因为 await 只能在 async 函数中使用，而不能直接在模块的顶层作用域使用，除非你的环境支持 top-level-await 实验性特性。

解决方案

正确的做法是在 Promise resolve 后，再将数值添加到数组中。这可以通过 .then() 方法来实现。

怪兽AI数字人

数字人短视频创作，数字人直播，实时驱动数字人

查看详情

const scrolls = [];

all_kdm_coverage.then(coverage => {
    scrolls.push({
        title: "Kadena de Mano",
        link: "./Kdm",
        coverage: coverage // 使用 resolve 后的数值
    });
    // 在此处或在scrolls数组被使用的组件中，触发重新渲染
    // 例如，如果scrolls用于React组件的状态，则更新状态
});

登录后复制

代码解释:

初始化空数组: 首先，我们创建一个空数组 scrolls。
.then() 方法: 我们使用 all_kdm_coverage.then() 方法来处理 Promise 的 resolve。then() 方法接受一个回调函数，该函数将在 Promise resolve 时被调用，并将 Promise 的 resolve 值作为参数传递给该回调函数（这里是 coverage）。
填充数组: 在回调函数中，我们使用 scrolls.push() 方法将包含 coverage 值的对象添加到数组中。

完整示例

为了更好地理解，以下是一个完整的示例，结合了异步数据获取和数组填充：

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

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);
        const coverage = kdm_entry.Coverage;
        return coverage;
    }
);

const scrolls = [];

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

    // 在此处处理 scrolls 数组，例如渲染到页面上
    console.log("scrolls:", scrolls);
});

// 注意：在 all_kdm_coverage.then() 外部直接访问 scrolls 数组可能为空

登录后复制

注意事项:

异步性: 请记住，all_kdm_coverage.then() 中的代码是异步执行的。这意味着在 then() 块外部直接访问 scrolls 数组时，它可能仍然是空的。
UI 更新: 如果在 React 或其他 UI 框架中使用此方法，需要在 then() 块中触发 UI 的重新渲染，以便显示更新后的 scrolls 数组。例如，可以使用 setState 更新 React 组件的状态。
错误处理: 建议在 .then() 方法后添加 .catch() 方法来处理 Promise 失败的情况。

总结

通过使用 .then() 方法，我们可以确保在 Promise resolve 后再将数值添加到数组中，避免 top-level-await 错误，并正确地处理异步操作的结果。这种方法确保了数据的正确性和程序的稳定性。

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