本文旨在帮助开发者理解如何在 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 代码。