本文旨在帮助开发者理解如何在 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 数组，因为它可能尚未填充代码解释：
- 我们首先定义一个空的 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 (
<>
<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 代码。
