자바스크립트의 Promise 활용법과 개념
자바스크립트에서 Promise는 비동기 작업을 관리하는 데 필수적인 객체입니다. 비동기 작업은 네트워크 요청처럼 완료까지 시간이 필요한 작업을 의미하며, Promise는 이런 작업이 다른 코드의 실행을 방해하지 않도록 돕습니다.
Promise의 핵심 개념
Promise는 진행 상황에 따라 다음 세 가지 상태 중 하나를 갖습니다.
- 대기(Pending): 작업이 시작되었지만 아직 완료되지 않은 초기 상태입니다.
- 이행(Fulfilled): 작업이 성공적으로 마무리된 상태로, 결과값을 반환합니다.
- 거절(Rejected): 작업이 실패한 상태로, 오류를 반환합니다.
아래는 Promise를 생성하고 사용하는 간단한 예제입니다.
// 새로운 Promise 인스턴스 생성
const myAsyncOperation = new Promise((resolve, reject) => {
// setTimeout을 사용해 비동기 작업 시뮬레이션
setTimeout(() => {
const operationSuccess = true; // 성공 또는 실패를 결정하는 조건
if (operationSuccess) {
resolve("작업이 성공적으로 완료되었습니다!"); // 성공 시 resolve 호출
} else {
reject("작업 실패: 오류가 발생했습니다."); // 실패 시 reject 호출
}
}, 1000); // 1초 후 실행
});
// Promise의 결과 처리
myAsyncOperation
.then((result) => {
console.log(result); // 성공 시 "작업이 성공적으로 완료되었습니다!" 출력
})
.catch((error) => {
console.error(error); // 실패 시 "작업 실패: 오류가 발생했습니다." 출력
})
.finally(() => {
console.log("모든 작업이 종료되었습니다."); // 성공, 실패와 관계없이 항상 실행
});
.then(): Promise가 이행(Fulfilled) 상태일 때 실행되며, 성공적인 결과값을 인자로 받습니다..catch(): Promise가 거절(Rejected) 상태일 때 실행되며, 발생한 오류를 인자로 받습니다..finally(): Promise의 성공 또는 실패 여부와 상관없이 항상 마지막에 실행되는 블록입니다.
다양한 Promise 유틸리티 메서드
자바스크립트는 여러 Promise를 동시에 처리할 수 있는 유용한 메서드들을 제공합니다.
Promise.all()
Promise.all()은 모든 Promise가 성공적으로 완료될 때까지 기다립니다. 만약 하나라도 실패하면 전체가 즉시 실패합니다.
- 반환 값: 모든 Promise의 결과값을 순서대로 배열로 반환합니다.
const promiseOne = Promise.resolve(10);
const promiseTwo = 20; // Promise가 아닌 값도 처리 가능
const promiseThree = new Promise((resolve, reject) => {
setTimeout(resolve, 50, 'finished');
});
Promise.all([promiseOne, promiseTwo, promiseThree]).then((values) => {
console.log(values); // 출력: [10, 20, "finished"]
}).catch(error => {
console.error(error); // 하나라도 실패하면 이 블록이 실행됨
});
Promise.allSettled()
Promise.allSettled()는 모든 Promise가 완료될 때까지 기다리지만, 성공/실패 여부와 관계없이 결과를 반환합니다. Promise.all()과는 달리, 특정 Promise가 실패해도 전체가 중단되지 않습니다.
- 반환 값: 각 Promise의 상태(
status:'fulfilled'또는'rejected')와 결과(value또는reason)를 담은 객체 배열을 반환합니다.
const firstPromise = Promise.resolve('Success!');
const secondPromise = new Promise((resolve, reject) => {
setTimeout(() => reject('Error!'), 100);
});
Promise.allSettled([firstPromise, secondPromise]).then((results) => {
console.log(results);
/*
출력:
[
{ status: 'fulfilled', value: 'Success!' },
{ status: 'rejected', reason: 'Error!' }
]
*/
});
Promise.race()
Promise.race()는 여러 Promise 중 가장 먼저 완료된 Promise의 결과만 반환합니다. 가장 먼저 완료된 Promise가 성공하면 성공값을, 실패하면 오류를 반환합니다.
- 반환 값: 가장 먼저 완료된 Promise의 결과 또는 오류.
const slowPromise = new Promise((resolve, reject) => {
setTimeout(resolve, 500, '500ms 후 완료');
});
const fastPromise = new Promise((resolve, reject) => {
setTimeout(reject, 100, '100ms 후 실패!');
});
Promise.race([slowPromise, fastPromise]).then((value) => {
console.log(value);
}).catch(error => {
console.error(error); // "100ms 후 실패!"가 출력됩니다.
});
Promise.any()
Promise.any()는 여러 Promise 중 가장 먼저 성공적으로 완료된 Promise의 결과만 반환합니다. 모든 Promise가 실패할 경우에만 AggregateError를 반환합니다.
- 반환 값: 가장 먼저 성공한 Promise의 결과값.
const failedPromiseOne = new Promise((resolve, reject) => {
setTimeout(reject, 500, '첫 번째 실패');
});
const successfulPromise = new Promise((resolve, reject) => {
setTimeout(resolve, 100, '두 번째 성공!');
});
Promise.any([failedPromiseOne, successfulPromise]).then((value) => {
console.log(value); // "두 번째 성공!"이 출력됩니다.
}).catch(error => {
console.error(error); // 모든 Promise가 실패했을 때만 실행
});
Promise.all()과 Promise.any()는 비슷해 보이지만, Promise.all()은 모든 성공을 기다리는 반면, Promise.any()는 첫 번째 성공만을 기다린다는 점에서 중요한 차이가 있습니다.