本文旨在讲解如何正确地从 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() 方法来实现。
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 错误，并正确地处理异步操作的结果。这种方法确保了数据的正确性和程序的稳定性。
