forEach，map中async 和 await

在 forEach 中 使用 async 和 await， 是不能达到同步的效果的。

forEach 本身是同步的没有问题

js
 代码解读
复制代码
const arr = ['java', 'js', 'php', 'node']
arr.forEach(item => {
  console.log(item)
})
console.log('我会在 forEach 循环结束之后执行')

// 执行结果
java
js
php
node
我会在 forEach 循环结束之后执行

如果有异步任务时

js
 代码解读
复制代码
const arr = ['java', 'js', 'php', 'node']
arr.forEach(item => {
  setTimeout(() => {
    console.log(item)
  }, 0);
})
console.log('settimeout之前执行')

// 执行结果
settimeout之前执行
java
js
php
node

使用 async 和await 时

js
 代码解读
复制代码
const arr = ['java', 'js', 'php', 'node']
const fn = (opt) => {
  return new Promise((res, rej) => {
    res(opt)
  })
}
arr.forEach(async item => {
  console.log(`item=${item}`)
  const result = await fn({id: item});
  console.log(result)
})
console.log('settimeout之前执行')

执行结果如下图所示

在el-cascader级联选择器中的问题

lazyLoad (node, resolve) {
    
    //.map  或者 .forEach 中使用 async 和 await，会出现意料之外效果,更换为for循环才搞定
   
}

如果想要在循环中使用 async 和 await， 可以使用 for...of 或者 普通 for 循环代替。