async/await JavaScript 함수 배열을 직렬로 실행하는 것과 동시에 실행하는 것

coreycleary.me에 원래 게시되었습니다. 이것은 내 콘텐츠 블로그의 교차 게시물입니다. 저는 매주 또는 2주에 한 번씩 새로운 콘텐츠를 게시합니다. 내 기사를 받은 편지함으로 직접 받고 싶다면 할 수 있습니다sign up to my newsletter! 또한 정기적으로 치트 시트 및 기타 공짜를 보냅니다.
async/await 함수의 배열(약속을 반환함)을 처리할 때 함수를 모두 직렬로 실행하는 방법(한 번에 하나씩)과 동시에 호출하는 방법(하나가 아닌 한 번에, 겹치는 기간 동안 실행됨).

어쩌면 당신은 그것들을 연속적으로 실행하려고 시도했지만 순서대로 실행되지 않을 수도 있습니다. 또는 동시에 실행하려고 시도했지만 한 번에 하나씩 차례로 실행하게 될 수도 있습니다.

이 게시물에서는 두 가지 방법을 모두 설명합니다.

이렇게 하면 각 함수가 순서대로 해결되어야 하는 요구 사항이 있는 경우 함수가 순서대로 해결되지 않는 이유를 알아내려고 머리를 긁적이지 않을 수 있습니다.

그리고 그것들이 동시에 일어나야 한다면, 그렇게 할 수 있고 연속해서 할 때보다 더 빨리 해결할 수 있을 것입니다.

시리즈

일련의 async/await 함수 배열을 실행하는 가장 쉬운 방법은 for...of 를 사용하는 것입니다. 이렇게 하면 한 번에 하나씩 순서대로 실행되고 각각이 해결될 때까지 기다립니다.

const asyncA = async () => {
  return 'a'
}

const asyncB = async () => {
  return 'b'
}

const asyncC = async () => {
  return 'C'
}

const list = [asyncA, asyncB, asyncC]

for (const fn of list) {
  await fn() // call function to get returned Promise
}

동시에

동시에 실행하려면 Promise.all() 를 사용하는 것이 좋습니다. async/await 함수는 Promise 주변의 구문 설탕이므로 Promise.all()를 사용할 수 있습니다.

const asyncA = async () => {
  return 'a'
}

const asyncB = async () => {
  return 'b'
}

const asyncC = async () => {
  return 'C'
}

const list = [asyncA, asyncB, asyncC]

await Promise.all(list.map(fn => fn()))  // call each function to get returned Promise

물론 이러한 비동기 함수의 반환 값을 원하는 경우 다음을 수행할 수 있습니다.

const responses = await Promise.all(list.map(fn => fn()))

// destructured example
const [a, b, c] = await Promise.all(list.map(fn => fn()))

빠른 참고: 이 게시물은 현재 직렬 및 동시 모두에 대한 "행복한 경로"(즉, 오류/약속 거부 없음)를 다루고 있습니다. 곧 더 강력한 오류 처리를 다룰 또 다른 게시물을 계획하고 있습니다. 지금은 Promise.all()을 사용하면 거부하는 첫 번째 약속으로 거부한다는 점에 유의하십시오.

실행

실행 측면에서 둘의 정의에 대해 혼란스러워하는 경우 시리즈와 동시의 모습은 다음과 같습니다.

기술적으로 동시에 실행되는 함수는 모두 정확히 동시에 시작되지는 않지만 모든 의도와 목적을 위해 다음과 같이 표시됩니다.

코드에서 이것을 보고 싶다면:

const wait = time => {
  return new Promise(resolve => setTimeout(resolve, time))
}

const someFn = async (item) => {
  await wait(2000)
  console.log(item)
}

// in series
for (const item of ['first', 'second', 'third']) {
  await someFn(item)
}
// 0s
// 2s - 'first'
// 4s - 'second'
// 6s - 'third'


// concurrently
await Promise.all(['first', 'second', 'third'].map(itm => someFn(itm)))
// 0s
// 2s (roughly) - 'first', 'second', 'third'

마무리

다음에 두 가지 유형을 실행하는 방법을 기억해야 하는 경우 이 게시물을 참조하십시오. 이전에 Promise.all()를 사용해 본 적이 없다면 다음에 모든 비동기 함수를 순서대로 실행할 필요가 없는 시나리오가 있을 때 사용해 보십시오. 시나리오에 따라 최종 사용자에게 좋은 향상이 될 수 있는 멋진 속도 향상입니다.
async/await 및 약속을 완전히 이해하지 못한 것 같습니까? 비동기 시나리오를 다루는 것을 포함하여 JavaScript 및 Node.js에 대한 새 게시물을 매주 또는 두 번 게시합니다. Here's that link again 내 뉴스레터를 구독하려면!