本文旨在讲解如何正确地从 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 错误，并正确地处理异步操作的结果。这种方法确保了数据的正确性和程序的稳定性。
以上就是使用 Promise 返回值填充数组的最佳实践的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1525302.html
微信扫一扫 
支付宝扫一扫 
