실시간 코드 예제와 함께 JavaScript Promise.all을 사용하는 방법 [Axios GET Calls]

Promise.all이란 무엇입니까?

Promise.all()은 Promise의 배열(그룹)을 입력으로 사용하고 프로세스를 단일 Promise로 수행하고 Than-able 또는 catch에서 반환하는 정적 메서드입니다.

Promise.all의 기본 구문은 다음과 같습니다.

  Promise.all([promise1, promise2,.....])
   .then(result=>{
     //Congrats! Promise got resolved.
    }).catch(err=>{
     //Ohh ! Promise got rejected.
    })

여기서 promise1, promise2는 약속도 반환하는 비동기 함수입니다.

Promise.all 메서드를 사용하는 경우

한 번에 처리할 비동기 작업 그룹이 있는 경우 Promise.all()을 사용하는 것이 좋습니다.

명확하게 이해하기 위해 Promise.all() 함수에 의해 해결되는 비동기 함수의 예를 들어 보겠습니다.

const p1 = new Promise((resolve,reject)=>{
    setTimeout(()=>{
        resolve('p1 completed');
    },1000);
})

const p2 = new Promise((resolve,reject)=>{
    setTimeout(()=>{
        resolve('p2 completed');
    },2000);
})

const p3 = new Promise((resolve,reject)=>{
    setTimeout(()=>{
        resolve('p3 completed');
    },3000);
})

Promise.all([p1,p2,p3,])
    .then(result=>{
        console.log(result);
    }).catch(err=>{
        console.log(err);
    })

위의 코드 스니펫에서 반환된 결과

[ 'p1 completed', 'p2 completed', 'p3 completed' ]

위의 예에서 우리는 p1, p2 및 p3이 함수로 setTimeout을 가지고 있기 때문에 비동기 함수임을 알 수 있습니다. 각 함수는 각각 1, 2 및 3초 후에 해결되지만 Promise.all은 마지막 함수가 해결되면 해결됩니다. Promise.all() 메서드의 아름다움.

Promise.all() 메서드의 핵심 속성은 모든 함수를 해결하고 입력 함수 배열에 지정한 순서대로 결과를 반환한다는 것입니다.

모든 배열 함수(p1,p2,p3)가 해결되면 결과만 then-able로 제공됩니다.
그렇지 않고 어떤 이유로든 Promise 함수 중 하나가 거부되면 Promise.all() 메서드는 catch() 블록으로 이동합니다. 이 시나리오에 대한 아래 예를 볼 수 있습니다.

 const p1 = new Promise((resolve,reject)=>{
    setTimeout(()=>{
        resolve('p1 completed');
    },1000);
})

const p2 = new Promise((resolve,reject)=>{
    setTimeout(()=>{
        resolve('p2 completed');
    },2000);
})

const p3 = new Promise((resolve,reject)=>{
    setTimeout(()=>{
        reject(new Error('p3 rejected'));
    },3000);
})


Promise.all([p1,p2,p3,])
    .then(result=>{
        console.log(result);
    }).catch(err=>{
        console.log(err);
    })

잘라낸 이 코드는 catch 블록에 올 것입니다.

Error: p3 rejected

이제 Promise.all()의 실시간 예를 살펴보겠습니다.

3개의 API를 호출해야 하는 대시보드가 ​​있다고 가정합니다.
API가 호출할 때까지 화면에 로더를 표시해야 합니다. 따라서 Promise.all() 메서드를 사용하여 이를 매우 쉽게 달성할 수 있습니다.
아래 예시를 참고해주세요

const axios = require('axios');

const task = async (id)=>{
    const response = await axios(`https://reqres.in/api/users/${id}`);
    const {data} = response;
    return data.data;
}
const ids = [1,2,3];
const allTasks = ids.map((pageNumber)=>{
    return task(pageNumber);
});

// you can start page loader here
Promise.all(allTasks)
    .then((result)=>{
        console.log(result);
        // once the task is finished then you stop loader over here
    }).catch((err)=>{
        //If error comes then also you have to stop loader
        console.log(err);
    })

위의 예에서 기본적으로 api를 호출하는 비동기 함수인 'task'라는 함수를 만들었습니다.

따라서 UserID 1,2 및 3에 대해 3개의 API를 호출해야 하므로 3개의 API 호출을 단일 배열(allTasks)로 그룹화하고 배열을 Promise.all(allTasks)에 입력으로 전달하고 해결 또는 거부를 기다립니다. .

모든 apis가 성공적으로 실행되면 배열 형식의 결과가 예상됩니다(사용자 응답).

api 중 하나라도 거부되면 catch 블록에서 오류를 예상해야 합니다.

제 작은 노력을 읽어주셔서 감사합니다.

글이 마음에 드셨다면 좋아요와 댓글 부탁드립니다.