Async/Await를 사용하여 여러 Promise 처리

아래 예제에서는 사용자 ID 배열을 반복하여 사용자에 대한 정보를 가져옵니다.

순진한 접근 방식은 각 응답을 하나씩 기다리는 것일 수 있습니다.

❌ 잘못되고 느린 방법

userIDs = ['fooID1', 'fooID2', ...]
const slowMethod = async (userIDs) => {
    const results = [];
    for (let i = 0; i < userIDs.length; i++) {
        const res = await fetch(`https://api.foo.com/users?uid=${userIDs[i]}`)
        const data = await res.json()
        results.push(data);
    }
    return results;
}
await slowMethod(); //O(n) time

✔️ 빠른 방법

userIDs = ['fooID1', 'fooID2', ...]
const fastCleanMethod = async (userIDs) => {
    const promises = userIDs.map(async userID => {
        const res = await fetch(`https://api.foo.com/users?uid=${userID}`);
        return await res.json();
    });
    return await Promise.all(promises);
}
await fastCleanMethod(); //O(1) time

🧐 작동 방식

빠른 방법은 Promise.all() 방법을 활용합니다. 작동 방식은 먼저 모든 데이터를 가져온 다음 Promise.all()을 사용하여 나중에 해결/거부하는 것입니다.

이렇게 하면 각 응답을 하나씩 기다릴 필요가 없습니다.

두 개의 별도 가져오기의 또 다른 예

사용자 데이터와 항목을 가져오고 싶다고 가정해 보겠습니다. 두 가지 방법이 있습니다.

❌ 빠르지만 느리게 실패

const getUserData = async (userIDs) => {
    const userDataPromise = fetch(`https://api.foo.com/users?uid=${userID}`);
    const userEntriesPromise = fetch(`https://api.foo.com/entries?uid=${userID}`);

    const [userDataRes, userEntriesRes] = [(await userDataPromise).json(), (await userEntriesPromise).json()];
    const [userData, userEntries] = [await userDataRes, await userEntriesRes];
    return {
        ...userData,
        userEntries,
    }
}

이 방법은 대부분의 경우 잘 작동하지만 두 번째 Promise가 거부되면 나쁜 일이 발생할 수 있습니다. 느리게 실패하는 이유는 두 번째 Promise가 거부되면 첫 번째 Promise가 여전히 전체 기간 동안 실행되기 때문입니다.

스택 오버플로 사용자@T.J. Crowder가 설명합니다parallel Promise patterns best here.

✔️ 빠르고 빠르게 실패

const getUserData = async (userIDs) => {
    const userDataPromise = fetch(`https://api.foo.com/users?uid=${userID}`);
    const userEntriesPromise = fetch(`https://api.foo.com/entries?uid=${userID}`);

    const [userDataRes, userEntriesRes] = await Promise.all([userDataPromise, userEntriesPromise]);
    const [userData, userEntries] = await Promise.all([userDataRes.json(), userEntriesRes.json()]);
    return {
        ...userData,
        userEntries,
    }
}

Promise가 거부되면 다른 Promise를 기다리지 않고 즉시 오류를 발생시키기 때문에 Promise.all()을 사용합니다.

여러 Promise를 처리하기 위해 순수한 async/await를 사용하고 싶을 수도 있지만 Promise.all()이 여전히 최선의 선택입니다.