JS 팁: #1 - 배열에 대한 비동기/대기

어떤 이유로든 map() 메서드를 사용하여 배열을 순회하고 각 요소에서 비동기 함수를 실행해야 한다고 가정합니다. 다음과 같은 것:

const users = ['user1', 'user2', 'user3']
const data = users.map(async (user) => await fetchApiData(user))

여기서 이해해야 할 것은 더미 함수fetchApiData(사용자 이름을 매개변수로 수신함)가 애플리케이션이 작동하는 외부 API를 비동기식으로 호출한다는 것입니다.

이제 콘솔을 통해 data 변수의 내용을 쓰면 어떻게 될까요? 글쎄, 우리는 다음과 같은 것을 찾을 것입니다.

const users = ['user1', 'user2', 'user3']
const data = users.map(async (user) => await fetchApiData(user))

console.log(data)
/*
[
  Promise { <pending> },
  Promise { <pending> },
  Promise { <pending> }
]
*/

즉, 코드의 실행은 외부 API 호출의 결과를 기다리는 것을 멈추지 않으므로 배열 데이터는 배열users에서 선언한 사용자 수만큼의 요소로 형성되고 각 위치에 연결됩니다. 보류 상태의 JavaScriptPromise 객체.

모든 호출을 병렬로 해결합니다.

이 문제를 해결하기 위한 첫 번째 옵션은 JavaScriptall() 객체의 Promise 메서드를 사용하는 것입니다. 이 메서드는 매개변수로 받는 모든 약속을 허용합니다(이 방법은 해결될 약속 배열을 매개변수로 받을 것으로 예상합니다) ) 서로 의존하지 않고 병렬로 실행되며 이러한 모든 약속이 완료될 때까지 실행이 완료되지 않습니다.

const users = ['user1', 'user2', 'user3']
const data = await Promise.all(
    users.map(async (user) => await fetchApiData(user))
)

console.log(data)
/*
[
  dataFromUser1,
  dataFromUser2,
  dataFromUser3
]
*/

병렬로 실행할 때 메서드의 총 실행 시간이 더 많은 해결 시간을 소비하는 약속의 총 실행 시간이라는 것을 이해해야 합니다. 이는 약속 간에 종속성이 없을 때 매우 빠른 대안이 됩니다.

화염을 순차적으로 해결합니다.

그러나 약속 실행, 즉 비동기 함수에 대한 호출에 종속성이 있으면 어떻게 될까요(예제에서 외부 API는 이전 호출의 결과에 따라 달라집니다)? 이 경우 다음과 같이 구조for ... of 구조를 사용해야 합니다.

const users = ['user1', 'user2', 'user3']
const data = []

for (const user of users) {
    data.push(await fetchApiData(user))
}

console.log(data)
/*
[
  dataFromUser1,
  dataFromUser2,
  dataFromUser3
]
*/

이 경우 하나의 호출이 이전 호출에 의존하므로 모든 코드의 실행 결과는 개별적으로 각 약속의 해상도 합계가 된다는 것을 이해하기 쉽습니다.