🚀 Promise 응답 순서 시뮬레이터
병렬 Promise에서 응답 받는 순서를 시각적으로 학습해보세요
📊 호출 상태0개
시뮬레이션을 시작하면 API 호출 상태가 여기에 표시됩니다
📋 응답 로그0개
응답 대기 중...
📚 학습 가이드: 병렬 Promise 응답 순서 처리
실제 코드와 함께 병렬 Promise의 작동 원리를 이해해보세요
🔍 작동 원리
- Promise 생성: 각 API 호출은 서로 다른 지연 시간(1~5초)을 가진 Promise로 생성됩니다.
- 병렬 실행: 모든 Promise가 동시에 시작되어 병렬로 실행됩니다.
- 비동기 응답: 각 Promise는 지연 시간에 따라 완료 순서가 달라집니다.
- 상태 업데이트: 각 Promise가 완료될 때마다 UI 상태가 실시간으로 업데이트됩니다.
- 순서대로 처리: 각 Promise가 완료되는 순서대로 결과를 받아 UI에 반영합니다.
💻 핵심 코드 분석
1. Promise 생성 함수
const fakeApi = (id: number, delay: number): Promise<string> => {
return new Promise((resolve) => {
setTimeout(() => {
resolve(`API ${id} 완료 (${delay}ms)`);
}, delay);
});
};각 API 호출을 시뮬레이션하는 Promise를 생성합니다. setTimeout을 사용해 지연 시간을 구현합니다.
2. 병렬 실행할 API 설정
// 각각 다른 지연 시간을 가진 API 설정
const apiConfigs = [
{ id: 1, delay: 2000 }, // 2초
{ id: 2, delay: 1000 }, // 1초
{ id: 3, delay: 3000 }, // 3초
];각 API마다 서로 다른 지연 시간을 설정합니다. 실제로는 네트워크 속도나 서버 처리 시간에 따라 달라집니다.
3. 병렬 Promise 실행 및 응답 순서 처리
// 모든 Promise를 병렬로 실행
const promises = apiConfigs.map((config) => {
return fakeApi(config.id, config.delay).then((result) => {
// 각 Promise가 완료되는 순서대로 출력
console.log(`응답 받음: ${result}`);
return result;
});
});
});핵심: 모든 Promise가 동시에 시작되지만, 각각의 지연 시간에 따라 완료 순서가 달라집니다. 위 예제에서는 API 2 → API 1 → API 3 순서로 완료됩니다.
💡 실행 결과 예시
// 1초 후: 응답 받음: API 2 완료 (1000ms)
// 2초 후: 응답 받음: API 1 완료 (2000ms)
// 3초 후: 응답 받음: API 3 완료 (3000ms)
// 3초 후: 모든 API 호출 완료호출 순서(1→2→3)와 응답 순서(2→1→3)가 다른 것을 확인할 수 있습니다.
🎯 주요 개념
🔄 비동기 처리
Promise는 비동기 작업을 처리하며, 각각 독립적으로 실행됩니다. 호출 순서와 완료 순서가 다를 수 있습니다.
⚡ 병렬 실행
여러 Promise를 동시에 실행하여 전체 처리 시간을 단축할 수 있습니다. 순차 실행보다 효율적입니다.
🎯 응답 순서 처리
각 Promise가 완료되는 순서대로 결과를 받아 로그에 순차적으로 기록하여 응답 순서를 확인할 수 있습니다.
🏃♂️ 실습 가이드
1
API 호출 수를 변경하여 다양한 시나리오를 테스트해보세요.
2
여러 번 실행하여 응답 순서가 매번 다른 것을 확인해보세요.
🧑💻
1nnovator 김민성
JavaScript 학습 센터 개발자
🌟 이 프로젝트가 도움이 되셨다면 블로그에서 더 많은 개발 이야기를 확인해보세요!
🤖이 페이지는 생성형 AI의 도움을 받아 제작되었습니다.