async/await 지옥을 피하십시오

async/await 지옥에서 탈출하거나 연결된 비동기 작업을 피하십시오.

먼저 async/await hell 에 대해 이야기한 다음 이를 피하는 방법을 살펴보겠습니다.

TL;DR

이것은 우리가 말하는 async/await 지옥입니다. 이것은 단지 예일 뿐이며 더 많은 것이 있습니다.

const user = await getUser(id);
const items = await getItems();
return {
  user,
  items,
};

여기에서는 특정 사용자 세부 정보를 가져온 다음 항목 목록을 가져옵니다. 무엇이 문제인가?라고 말할 수 있습니다. 문제는 항목 목록을 가져오는 것이 사용자 목록에 의존하지 않지만 항목 목록을 가져오기 전에 사용자 세부 정보를 얻기를 기다리고 있다는 것입니다. 그렇다면 병렬로 실행할 수 있다면 왜 기다리게 될까요? 또한 성능이 저하됩니다.

이제 다음 예를 고려하십시오.

  (async () => {
    const user = await getUser(id);
    const items = await getItems();
    return {
      user
       items
    }
  })()

IIFE 을 사용하여 래핑했지만 여전히 이 코드는 하나씩 실행됩니다.

그래서 우리는 그것을 피하기 위해 무엇을 할 수 있습니다.

다음과 같은 솔루션이 있습니다.

우리는 다음과 같은 것을 사용하여 고칠 수 있습니다.

이 경우 사용자와 항목은 약속을 반환하므로 값을 반환할 때 약속이 이행될 때까지 기다릴 수 있습니다.

const user = userPromise(id);
const items = itemsPromise();
return {
  user: await whenUser,
  items: await whenItems,
};

그러나 나는 Promise를 사용하는 것을 선호합니다. 모두 훨씬 깨끗합니다.

const [user, items] = await Promise.all([getUser(id), getItems()]);
return { user, items };

Promise.all이 모든 것을 동시에 실행하기 때문에 간단하고 우아하며 최대 2배 빠릅니다.

MDN에서 Promise.all에 대해 자세히 알아볼 수 있습니다.

Note: Worth noting that Promise.all will return either when all promises succeed or the first one rejects, whereas Promise.allSettled will wait until every promise has either resolved or rejected