forEach와 await

문제 상황

• for문 대신에 자바스크립트의 루프(forEach)를 사용해보려고 함 → 그러나 async/await를 사용할 때 문제 발생

forEach의 특징

무조건 끝까지 순회를 마침 → return, break 문을 사용하면 안 됨!! 또한 async, await를 기다려주지 않음!

해결방법

1) for문 + await를 사용

• 그러나 async/await를 사용할 때 for문으로 배열을 순회하면서 사용하면 waterfall 발생 → Promise.all()을 이용하면 병렬적으로 동작 가능!

2) Promise.all()을 사용

여러 Promise()들

• reject 발생에도 다 실행할 때 => Promise.allSettled,
• 하나라도 reject 시 멈출 때 (모든 Promise 가 resolve 됐을 때를 보장하려면)=> Promise.all
• resolve / reject 여부 상관없이 가장 먼저 수행된 결과를 받아올 때 => Promise.race

• map을 통해 각 Promise를 배열로 저장한 후 Promise.all()을 통해 비동기 함수들을 동시에 실행 가능!
• Promise.all()은 배열 안의 모든 Promise를 한번에 실행하므로 순서가 중요하지 않은 경우 사용 가능하다. (만약 순서가 중요하면 Promise.resolve()를 사용하는 방법도 있다고 한다)

작성한 코드

const promises = trainingList.map(async (item, i) => {
    if (item.training_location_id) {
      const trainingLocationName = await TrainingLocationsRepository.findById(item.training_location_id);
      item.trainingLocationName = trainingLocationName.data.dataValues.name;
    }

    // user id로 등록자명 가져오기
    if (item.user_id) {
      const registerName = await UserRepository.findById(item.user_id);
      trainingList[i].registerName = registerName.data.dataValues.name;
    }

    // 팀명 가져오기
    if (item.training_team_id) {
      const trainingTeamName = await TeamRepository.findById(item.training_team_id);
      trainingList[i].trainingTeamName = trainingTeamName.data.dataValues.name;
    }
  });

  await Promise.all(promises);

참고 자료

https://constructionsite.tistory.com/43

https://velog.io/@minsangk/2019-09-06-0209-%EC%9E%91%EC%84%B1%EB%90%A8-eik06xy8mm