您的位置:首页 > 游戏 > 游戏 > (javascript)为什么await在forEach中不生效?

(javascript)为什么await在forEach中不生效?

2025/2/26 3:05:59 来源:https://blog.csdn.net/yzy85/article/details/140148635  浏览:    关键词:(javascript)为什么await在forEach中不生效?

转载:为啥await在forEach中不生效?-腾讯云开发者社区-腾讯云 (tencent.com)

两天要写循环遍历请求接口,于是就在forEach中用到了await,但是根本不是我想要的啊!

于是各种查,各种搜,终于有点明白了。先看段代码:

function test(){let arr =[3,2,1]arr.forEach(async item=>{const res = await fetch(item)    console.log("end")})
}function fetch(x){return new Promise((resolve,reject)=>{setTimeout(()=>{revolve(x)}, 500*x)})
}test();

期望打印出来顺序是:

3
2
1
end

然而打印顺序却是:

end
1
2
3

原因是forEach只支持同步代码

Pollyfill版本的forEach,简化以后类似于下面的伪代码:

while(index < arr.length){callback(item, index)
}

解决办法

方法一:Promise.all

async function test(){let arr = [3,2,1]await Promise.all(arr.map(async item=>{const res = await fetch(item);console.log(res)}))console.log("end")
}

async函数肯定会返回一个Promise对象,map返回一个存放Promise的数组。但是这样并不能保证fetch是按顺序完成的,如果想按顺序,请用下面的方法。

方法二:for ... of

async function test(){let arr =[3,2,1];for(const item of arr){const res = await fetch(item);console.log (res)}console.log("end")
}function fetch(x){return new Promise((resolve,reject)=>{setTimeout(()=>{resolve(x)}, 1500*x)})
}test();

因为for... of和forEach内部的机制不同,forEach是直接调用回调函数,for...of 是通过迭代器的方式去遍历的:

async function test(){let arr = [3,2,1];const iterator = arr[Symbol.iterator]()let res = iterator.next()while(!res.done){const value = res.value;const res1 = await fetch(value);console.log(res1);res.iterator.next();}console.log("end")
}

以上代码等价于for...of

参考文章:https://yuchengkai.cn/blog/2019-04-01.html#%E6%80%8E%E4%B9%88%E8%A7%A3%E5%86%B3%EF%BC%9F

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com