Promise填充数组的正确用法

积累知识，胜过积蓄金银！毕竟在文章开发的过程中，会遇到各种各样的问题，往往都是一些细节知识点还没有掌握好而导致的，因此基础知识点的积累是很重要的。下面本文《使用 Promise 填充数组的正确方法》，就带大家讲解一下知识点，若是你对本文感兴趣，或者是想搞懂其中某个知识点，就请你继续往下看吧~

本文旨在帮助开发者理解如何在 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 数组，因为它可能尚未填充

代码解释：

1. 我们首先定义一个空的 scrolls 数组。
2. 然后，我们调用 all_kdm_coverage.then() 方法，传入一个回调函数。
3. 当 all_kdm_coverage Promise 成功解析后，回调函数会被执行，coverage 参数将包含解析后的值。
4. 在回调函数中，我们使用 coverage 值创建一个新的对象，并将其添加到 scrolls 数组中。
5. 关键点： 在 .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 (
            <>
                <h1 className="h1_index">Scrolls</h1>
                <Collection
                    type="list"
                    items={scrolls}
                    gap="1.0rem"
                    alignItems="center">
                    {(item, index) => (
                        <ScrollCard
                            key={index}
                            padding="1rem">
                            <Link href={item.link}>
                                {item.title}
                            </Link>
                            <Rating ratings={[item.coverage]}/>
                        </ScrollCard>
                    )}
                </Collection>
            </>
        );
    };
});

注意事项：

• 确保在 Promise 解析后才使用解析后的值。
• 避免在顶层使用 await 关键字，除非你的环境支持 top-level-await。
• 使用 .then() 方法处理 Promise 的结果，并在回调函数中执行后续操作。
• 如果需要链式处理多个 Promise，可以使用多个 .then() 方法。

总结

通过使用 .then() 方法，可以有效地处理 Promise 的返回值，并将其用于后续代码，避免出现 [object Promise] 的问题。理解 Promise 的异步特性，并遵循上述建议，可以编写出更健壮、更可维护的 JavaScript 代码。

本篇关于《Promise填充数组的正确用法》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！