🙅🏽‍♂️ FOREACH 내부에서 AWAIT를 사용하지 마세요.

의도한 대로 작동하지 않습니다.

빠른 시나리오를 살펴보겠습니다. 다음 코드를 고려하고 출력을 추측하십시오. 나는 매초를 기다리고 resValue를 반환합니다.

const arr = [1 ,2 , 3 , 4]
let resValue = 1

const _1SecPromise = () => new Promise((res, rej) => { 
  setTimeout(() => { res(resValue++) }, 1000); 
})

const justFun  = async () => {
  console.log('🚀 Start')

  arr.forEach(async (each) => {
    const val = await _1SecPromise()
    console.log("🚀 each", val)

   })

  console.log('🚀 End')

}

justFun()

당신이 그것을 맞혔다면, 당신은 이미 Generators라는 개념을 알고 있을 것입니다. 2분 안에 배우지 않으면.

발전기의 개념.

간단히 말해서 각각은 동기식인 별도의 함수에서 호출됩니다.

즉, forEach는 동기 함수를 예상합니다. ForEach는 약속을 기다리지 않습니다.

생성기 작동 방식에 대한 간단한 설명은 다음 이미지

에서 볼 수 있습니다.

next() 메서드는 동기식(최소한 forEach 경우)만 허용하므로 대기를 사용할 때 약속이 의도한 대로 작동하지 않습니다.

대기 및 루프를 사용하는 간단한 솔루션은 Good'ol for 루프를 사용하는 것입니다.

const justFun  = async () => {
  console.log('🚀 Start')
  for ( let i = 0 ; i < arr.length ; i ++) {
    const val = await _1SecPromise()
    console.log('🚀 each ', i )

  }
  console.log('🚀 End')
}

이것이 예상대로 작동할 것이라고 믿으세요.



약속의 배열을 해결하는 방법에 대해 더 알고 싶다면.
다음과 같은 몇 가지 훌륭한 방법이 있습니다.

Promise.all() 메서드는 약속의 이터러블을 입력으로 사용하고 입력 약속의 결과 배열로 확인되는 단일 약속을 반환합니다.

for...of statement은 내장 문자열, 배열, 배열과 유사한 객체(예: 인수 또는 NodeList), TypedArray, Map, Set 및 사용자 정의 iterable을 포함하여 반복 가능한 객체를 반복하는 루프를 만듭니다.

의도한 대로 작동하는 Map 및 Reduce과 같은 반복자를 사용할 수도 있습니다.

이 게시물에서 더 많은 설명을 원하거나 일부 오류가 있으면 의견을 남겨주세요.

새로운 것을 배웠다면 💜 를 잊지 마세요!

🧑🏽‍💻 일반 및 생성기 기능을 보여주는 작은 그림을 만드는 데 사용한 앱을 알고 싶습니다. 방문

🕸 당신은 신진 웹 개발자이며 방문에서 배울 멋진 CSS 웹사이트가 필요하십니까?

🪓 mongoDB 사용 ? 체크 아웃

지식을 향상시키기 위해 이러한 유형의 작은 기사가 마음에 들면 dev.to를 팔로우하는 것을 잊지 마십시오. 더 많이 작성하고 오픈 소스에 기여하도록 동기를 부여합니다.

평화🕊 !