药品网站建设,怎样做网站的轮播图片,建立官方网站多少钱,腾讯云建设网站教程javascript_forEach中使用异步函数执行顺序问题#xff0c;错误原因解决思路
start
最近在写异步逻辑的时候#xff0c;经常会使用 async/await。有些时候需要执行异步逻辑的函数比较多#xff0c;就习惯用 forEachasync/await 去处理函数了。在测试的过程中会发现#x…javascript_forEach中使用异步函数执行顺序问题错误原因解决思路
start
最近在写异步逻辑的时候经常会使用 async/await。有些时候需要执行异步逻辑的函数比较多就习惯用 forEachasync/await 去处理函数了。在测试的过程中会发现执行顺序余预期不符今天来写一篇文章简单说一下。
问题
例如下面的代码
const ratings [5, 4, 5]
let sum 0const sumFunction async (a, b) a bratings.forEach(async (rating) {sum await sumFunction(sum, rating)
})console.log(sum)
// 期望的输出14
// 实际的输出0运行截图 我们预期的结果是14结果却是0为什么
其实我看到这个问题的时候就想到 forEach 不支持异步函数了早期在阅读MDN官方文档的时候有一些印象。我们看一下MDN官网的描述
MDN_forEach 点击此链接直接全局搜索异步即可
forEach() 期望的是一个同步函数它不会等待 Promise 兑现。在使用 Promise或异步函数作为 forEach 回调时请确保你意识到这一点可能带来的影响。 解决思路
看到官网有一个链接promsie组合的方式 去解决。
当然解决方式有很多我这里列举一个我的解决示例。 简单说下思路其实就是用for循环替代forEach即可快速支持异步但是需要对外层函数做asyns处理。 /* 旧版代码 */
// const ratings [5, 4, 5]
// let sum 0// const sumFunction async (a, b) a b// ratings.forEach(async (rating) {
// sum await sumFunction(sum, rating)
// })// console.log(sum)
// // 期望的输出14
// // 实际的输出0/* 新版代码 */
const ratings [5, 4, 5]
let sum 0const sumFunction async (a, b) a basync function lazy_tomato() {for (let i 0; i ratings.length; i) {sum await sumFunction(sum, ratings[i])}console.log(sum)
}lazy_tomato()
// 期望的输出14
// 实际的输出14
end
小细节啦稍微注意下即可。
