await 不能用在 forEach

通过打印发现是先走了 走到forEach里面接口请求的时候 没有等待 就直接走了forEach外面的点击保存

问题分析

forEach 只支持同步代码
polyFill的forEach的源码

差不多就是下面这个代码这么个意思

while (index < arr.length) {
      callback(item, index)   //也就是我们传入的回调函数
    }

通过阅读polyfill的forEach源码，发现，forEach 只是简单的执行了下回调函数而已，并不会去处理异步的情况。并且你在 callback 中即使使用 break 也并不能结束遍历。

解决方案

解决方案有两种，

1. 是 我将在forEach中的请求挪到了进入页面初始化的时候 将值保存下来，这样在forEach的时候 就是个同步，不需要在请求

2. 使用 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)
		}, 500 * x)
	})
}

调用test这个函数发现，是按照3,2,1，end这个顺序打印下来的 ，然后为啥for of就好使呢?
for…of 内部处理的机制和 forEach 不同，forEach 是直接调用回调函数，for…of 是通过迭代器的方式去遍历

迭代器的概念 就是

就是遍历器，它是一种接口，为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署接口，就可以完成遍历操作（即依次处理该数据结构的所有成员）。