forEach 与 async...await不会等待await的解决与原因

原创已于 2024-01-09 12:06:02 修改 · 1.3k 阅读

11 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

标签

#javascript #开发语言

于 2024-01-09 12:02:56 首次发布

文章比较了JavaScript中`forEach`和`for...of`在处理异步请求时的行为，指出`forEach`不支持等待异步操作完成，而`for...of`通过异步迭代器实现按序执行。解决后台高频率请求问题时，推荐使用`for...of`确保按需等待每个请求响应。

情景：需要等待第一个请求返回结果，再发起下一次迭代中的请求（背景原因：后台不能承受多个请求高频）

代码案例（使用forEach）

	async function test() {
			let arr = [3, 2, 1]
			arr.forEach(async item => {
                   //fetch假设是接口的请求方法
				const res = await fetch(item)
				console.log(77777);
				console.log(res)
			})
			console.log('end')
		}

		function fetch(x) {
			return new Promise((resolve, reject) => {
				setTimeout(() => {
					resolve(x)
				}, 500 * x)
			})
		}
      test()

1.先说解决方法

使用for...of代替forEach

因为forEach不能等待await之后再继续下一步的循环，而for...of可以

	async function test() {
			let arr = [3, 2, 1]
			for (let item of arr) {
				// arr.forEach(async item => {
				const res = await fetch(item)
				console.log(77777);
				console.log(res)
				// })
			}
			console.log('end')
		}

		function fetch(x) {
			return new Promise((resolve, reject) => {
				setTimeout(() => {
					resolve(x)
				}, 500 * x)
			})
		}

		test()

2.forEach为什么起不到等待await之后再继续下一步的循环

原因：

直接原因：这是因为 forEach 不会等待异步操作的完成，而是立即开始下一个循环迭代，导致无法按顺序执行异步操作。
根本原因：forEach 是数组的一个方法，用于遍历数组中的每个元素并执行一个提供的函数。这个方法并不关心函数内部的执行细节，只是简单地将函数应用到每个元素上。forEach 不会等待这个异步函数完成，而是会继续执行下一个元素。这是因为在 forEach 的设计目标中，它并不关心或控制函数调用的执行顺序

3.for...of为什么可以等待await之后再继续下一步的循环

原因：

for...of赖于异步迭代器的“完成”和“拒绝”状态来决定下一步的操作。当异步迭代器返回一个 Promise 对象时，for...of 会等待这个 Promise 完成（或拒绝）后，再继续执行下一个循环。
具体来说，for...of 循环使用了 Symbol.asyncIterator，它会返回一个异步迭代器对象。每次迭代时，for...of 循环会调用异步迭代器对象的 next() 方法，该方法返回一个 Promise，该 Promise 在异步操作完成后解析为一个包含当前迭代值的对象。for...of 循环会等待这个 Promise 解析后，才会进行下一次迭代

总结： forEach 不论函数是否异步都不会等待，而 for...of 循环会根据 await 的情况来决定是否等待。这些差异源自它们各自的实现方式和设计目的