使用 Promise 返回值填充数组的正确方法

顺亿

2026-10-05 • 👁 0人浏览过

本文旨在帮助开发者理解如何在 JavaScript 中正确处理 Promise 返回值，并将其用于填充数组。我们将通过一个实际案例，详细介绍如何使用 .then() 方法来确保在 Promise 完成后，再将解析后的值用于后续代码，避免出现 [object Promise] 的问题。在 JavaScript 中，Promise 代表一个异步操作的最终完成（或失败）及其结果值。直接将 Promise 对象赋值给变量，而不等待其解析，会导致后续代码使用 Promise 对象本身，而不是其解析后的值。这通常不是我们期望的行为。理解 Promise 的本质首先，需要明确的是，Promise 是一种处理异步操作的机制。当调用一个返回 Promise 的函数时，实际上并没有立即获得结果，而是获得了一个“承诺”，表示将来会得到结果。为了获取 Promise 解析后的值，需要使用 .then() 方法。使用 .then() 方法处理 Promise .then() 方法允许我们在 Promise 成功解析后执行回调函数，并在回调函数中访问解析后的值。以下是一个示例，展示如何使用 .then() 方法来获取 all_kdm_coverage Promise 的解析值，并将其用于填充 scrolls 数组：

const scrolls = [];
all_kdm_coverage.then(coverage => {
    scrolls.push({
        title: "Kadena de Mano",
        link: "./Kdm",
        coverage: coverage
    });
    // 在这里使用 scrolls 数组，确保数据已填充
    console.log(scrolls);
});

// 注意：这里不能立即使用 scrolls 数组，因为它可能尚未填充

代码解释： Eclipse导入Android或其他的JAVA项目的正确方法 WORD版本文档主要讲述的是Eclipse导入Android或其他的JAVA项目的正确方法；希望本文档会给有需要的朋友带来帮助；感兴趣的朋友可以过来看看下载我们首先定义一个空的 scrolls 数组。然后，我们调用 all_kdm_coverage.then() 方法，传入一个回调函数。当 all_kdm_coverage Promise 成功解析后，回调函数会被执行，coverage 参数将包含解析后的值。在回调函数中，我们使用 coverage 值创建一个新的对象，并将其添加到 scrolls 数组中。关键点：在 .then() 回调函数外部，不能立即使用 scrolls 数组，因为 Promise 的解析是异步的，scrolls 数组可能尚未填充。应该在 .then() 内部或者在 .then() 之后链式调用另一个 .then() 来使用该数组。避免 top-level-await 的错误直接在模块的顶层使用 await 关键字（如示例中尝试的 coverage: await all_kdm_coverage）会导致 Module parse failed: The top-level-await experiment is not enabled 错误。这是因为 top-level-await 是一个实验性特性，并非所有 JavaScript 环境都支持。虽然可以通过配置启用它，但更推荐使用 .then() 方法，因为它更通用且兼容性更好。更完整的示例（结合原始代码）

async function GetCoverage(scroll_path) {
    const apiName = 'foo';
    const path = '/scrolls/' + scroll_path;
    const myInit = {
        headers: {},
        response: false,
    };
    const response = await API.get(apiName, path, myInit)
    console.log('response:',response)
    return response.Items
}

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

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

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

const scrolls = [];

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

    // 在这里使用 scrolls 数组，例如渲染组件
    export const DanzanRyuCollection = () => {
        return (
            <>
                Scrolls
                
                    {(item, index) => (
                        
                            
                                {item.title}
                            
                            
                        
                    )}
                
            
        );
    };
});

注意事项：确保在 Promise 解析后才使用解析后的值。避免在顶层使用 await 关键字，除非你的环境支持 top-level-await。使用 .then() 方法处理 Promise 的结果，并在回调函数中执行后续操作。如果需要链式处理多个 Promise，可以使用多个 .then() 方法。总结通过使用 .then() 方法，可以有效地处理 Promise 的返回值，并将其用于后续代码，避免出现 [object Promise] 的问题。理解 Promise 的异步特性，并遵循上述建议，可以编写出更健壮、更可维护的 JavaScript 代码。

Scrolls

相关文章