Async/Await와 함께 Promise.all을 사용하는 방법

ECMAScript 2017 에서 소개된 비동기 함수 및 await 키워드는 JavaScript 언어에 대한 보다 최근의 혁신입니다. 이러한 기능은 본질적으로 Promise 위에 있는 구문 설탕이므로 비동기식 프로그래밍을 더 쉽게 쓰고 읽을 수 있습니다. 그들은 비동기 코드를 과거의 동기 코드처럼 보이게 하므로 분명히 이해할 가치가 있습니다.

먼저 함수 선언을 비동기 함수로 변환하는 데 사용되는 async 키워드가 있습니다. Anasync function은 비동기 기능을 시작하기 위해 await 키워드의 사용을 예상하는 방법을 이해하는 것입니다.

async 함수를 await 키워드와 결합하면 async 함수의 이점이 명확해집니다. await는 표준 JavaScript 코드의 비동기 함수에서만 작동하지만 자체적으로 JavaScript 모듈과 함께 사용할 수도 있습니다. 모든 비동기 약속 기반 함수는 약속이 이행될 때까지 해당 줄에서 코드를 중지한 다음 결과를 반환하기 위해 앞에 await를 가질 수 있습니다. 웹 API 호출을 포함하여 Promise를 반환하는 모든 함수는 await 을 사용하여 호출할 수 있습니다.

데이터베이스에서 모든 사용자를 검색하고 특정 시간이 걸리는 API 요청이 있다고 가정해 보겠습니다.

// First promise returns an array after a delay
const getUsers = () => {
  return new Promise((resolve, reject) => {
    return setTimeout(
      () => resolve([{ id: 'ranjeet' }, { id: 'adil' }, { id: 'preet' }]),
      600
    )
  })
}

이제 전체 사용자 기반에 존재하는 데이터에 의존하는 또 다른 요청이 있습니다.

// Second promise relies on the result of first promise
const getIdFromUser = (user) => {
  return new Promise((resolve, reject) => {
    return setTimeout(() => resolve(user.id), 500)
  })
}

두 번째를 변경하는 세 번째 호출도 있습니다.

// Third promise relies on the result of the second promise
const capitalizeIds = (id) => {
  return new Promise((resolve, reject) => {
    return setTimeout(() => resolve(id.toUpperCase()), 200)
  })
}

첫 번째 호출을 먼저 수행한 다음 for…of loop을 사용하여 이에 의존하는 다른 호출을 수행할 생각입니다.

const runAsyncFunctions = async () => {
  const users = await getUsers()

  for (let user of users) {
    const userId = await getIdFromUser(user)
    console.log(userId)

    const capitalizedId = await capitalizeIds(userId)
    console.log(capitalizedId)
  }

  console.log(users)
}

runAsyncFunctions()

그러나 이것은 내 출력이 될 것입니다.

ranjeet
RANJEET
adil
ADIL
preet
PREET
(3) [{…}, {…}, {…}]

대신 Promise.all()을 호출하여 첫 ​​번째, 두 번째 및 세 번째 절차를 모두 실행할 수 있습니다.

const runAsyncFunctions = async () => {
  const users = await getUsers()

  Promise.all(
    users.map(async (user) => {
      const userId = await getIdFromUser(user)
      console.log(userId)

      const capitalizedId = await capitalizeIds(userId)
      console.log(capitalizedId)
    })
  )

  console.log(users)
}

산출:

(3) [{…}, {…}, {…}]
ranjeet
ali
preet
RANJEET
ADIL
PREET

다음은 콘솔에서 실행할 수 있는 전체 코드입니다.

// First promise returns an array after a delay
const getUsers = () => {
  return new Promise((resolve, reject) => {
    return setTimeout(
      () => resolve([{ id: 'ranjeet' }, { id: 'adil' }, { id: 'preet' }]),
      600
    )
  })
}


// Second promise relies on the result of first promise
const getIdFromUser = (user) => {
  return new Promise((resolve, reject) => {
    return setTimeout(() => resolve(user.id), 500)
  })
}


// Third promise relies on the result of the second promise
const capitalizeIds = (id) => {
  return new Promise((resolve, reject) => {
    return setTimeout(() => resolve(id.toUpperCase()), 200)
  })
}

const runAsyncFunctions = async () => {
  const users = await getUsers()

  Promise.all(
    users.map(async (user) => {
      const userId = await getIdFromUser(user)
      console.log(userId)

      const capitalizedId = await capitalizeIds(userId)
      console.log(capitalizedId)
    })
  )

  console.log(users)
}

runAsyncFunctions()

나는 자세히 쓴다 article on my website 더 명확하게 이해하고 더 많은 업데이트를 위해 우리를 따르기 위해 링크를 클릭하십시오