1.背景

在写一个对齐脚本时 发现下列问题

const timeList = await imageList.map( (item,index)=>{
        return  item.identify_border(start_time, end_time)
    })
// timeList = [Promise,Promise,Promise,Promise] 取不到timeList中的值

so 用普通的for循环试了一遍

const timeList = []
  for(let i=0;i<imageList.length;i++){
    const time =await imageList[i].identify_border(start_time, end_time)
    timeList.push(time)
  }
// timeList = [ { },{ },{ },{ },{ } ]  能取到timeList中的值

2.为什么出现这个问题

  • 原因是forEach遍历，仅仅是短时间内连续发起了多个请求，对于某一次请求有等待过程，但对于整体的多次请求是没有作用的 ，也就是async await仅仅作用于某一次请求的处理过程中，并不作用于所有请求的先后顺序。
  • 贴上chatGPT的回答

3.延伸问题：JavaScript 中，为什么数组.map循环中可以使用async/await，而数组.forEach中不可以使用async/await？

  • Array.map 和 Array.forEach 是 JavaScript 中的两种不同的数组循环方法。Array.map 方法会映射数组的每个元素，并返回一个新的数组，其中包含映射函数的结果。相反，Array.forEach 方法只是遍历数组中的每个元素，不会返回任何结果。因为 Array.map 方法会返回新数组，所以可以使用 async/await 来等待异步操作完成，并在映射数组中获取结果
    例如 map中使用：
async function processArray(array) {
  return await Promise.all(array.map(async item => {
    const result = await someAsyncOperation(item);
    return result;
  }));
}

长风破浪会有时，直挂云帆济沧海