本文旨在解决在 JavaScript 异步编程中，如何从 Promise 对象中提取数值，并在后续代码（例如数组定义）中使用。通过详细的代码示例，展示了如何正确处理 Promise，并避免常见的 top-level-await 错误，确保异步操作的顺利进行，从而构建动态和响应迅速的应用程序。
处理 Promise 的正确姿势
在 JavaScript 中，Promise 代表一个异步操作的最终完成（或失败）及其结果值。直接将 Promise 对象赋值给变量并不能获得其内部的值，而需要在 Promise 完成后通过 .then() 方法来访问。
使用 .then() 方法
.then() 方法允许你在 Promise 成功解决（resolve）后执行一个回调函数。这个回调函数会接收到 Promise 解决的值，你可以在函数内部处理这个值，并将其用于后续的操作。
例如，假设我们有一个返回 Promise 的函数 getData()：
立即学习“Java免费学习笔记（深入）”；
async function getData() {
// 模拟异步操作
return new Promise(resolve => {
setTimeout(() => {
resolve(42); // 假设异步操作返回数值 42
}, 1000);
});
}为了获取 getData() 返回的数值，我们需要使用 .then()：
getData().then(value => {
console.log("Promise 的值为:", value); // 输出: Promise 的值为: 42
// 在这里可以使用 value 进行后续操作
});
console.log("getData() 执行完毕"); // 这行代码会在 Promise resolve 之前执行这段代码展示了异步操作的特性：console.log("getData() 执行完毕") 会在 Promise 解决之前执行，而 .then() 中的回调函数会在 Promise 解决后执行。
在数组定义中使用 Promise 的值
回到原始问题，如何在数组定义中使用从 Promise 中提取的值？一个常见错误是尝试使用 await 在数组字面量中，这通常会导致 top-level-await 错误，除非你的环境（例如 ES modules 在顶层）明确支持它。
正确的做法是，在 Promise 解决后，动态地修改数组。以下是一个示例：
async function GetCoverage(scroll_path) {
// 模拟异步 API 调用
return new Promise(resolve => {
setTimeout(() => {
const mockResponse = {
Items: [
{ Scroll: "kdm", Coverage: 95 }
]
};
resolve(mockResponse);
}, 500);
});
}
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.Items)
const coverage = kdm_entry.Coverage
console.log('kdm coverage:',coverage)
return coverage
}
);
const scrolls = [];
all_kdm_coverage.then(coverage => {
scrolls.push({
title: "Kadena de Mano",
link: "./Kdm",
coverage: coverage
});
console.log("scrolls 数组:", scrolls);
// 在这里可以使用 scrolls 数组，例如渲染到 UI
});在这个例子中，scrolls 数组首先被定义为空数组。然后，在 all_kdm_coverage Promise 解决后，我们使用 .then() 方法将包含 coverage 值的对象添加到 scrolls 数组中。
注意事项
- 异步操作的顺序： 确保你理解异步操作的执行顺序。Promise 的 .then() 回调函数会在 Promise 解决后才执行。
- 错误处理： 使用 .catch() 方法处理 Promise 的 rejected 状态，避免程序崩溃。
- 避免 top-level-await： 除非你的环境支持，否则避免在顶层作用域使用 await。
总结
处理 JavaScript 中的 Promise 需要理解异步编程的本质。通过使用 .then() 方法，我们可以安全地从 Promise 中提取值，并在后续的代码中使用。避免直接在数组字面量中使用 Promise 对象，而是动态地更新数组，可以有效地解决异步数据处理的问题。
