本文旨在帮助开发者理解如何在 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 (
Scrolls
{(item, index) => ( {item.title} )}
注意事项：
确保在 Promise 解析后才使用解析后的值。避免在顶层使用 await 关键字，除非你的环境支持 top-level-await。使用 .then() 方法处理 Promise 的结果，并在回调函数中执行后续操作。如果需要链式处理多个 Promise，可以使用多个 .then() 方法。
总结
通过使用 .then() 方法，可以有效地处理 Promise 的返回值，并将其用于后续代码，避免出现 [object Promise] 的问题。理解 Promise 的异步特性，并遵循上述建议，可以编写出更健壮、更可维护的 JavaScript 代码。
以上就是使用 Promise 返回值填充数组的正确方法的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1525338.html
微信扫一扫 
支付宝扫一扫 
