本文旨在解决在 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 对象，而是动态地更新数组，可以有效地解决异步数据处理的问题。
以上就是JavaScript 异步编程：从 Promise 中提取值并在后续代码中使用的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1525292.html
微信扫一扫 
支付宝扫一扫 
