자바스크립트 Promise는 비동기 처리를 위한 객체로, 비동기적으로 실행되는 작업의 결과를 대기하고 있을 수 있게 해줍니다. Promise를 사용하면 비동기 작업을 보다 쉽게 관리할 수 있으며, 비동기적으로 실행되는 코드의 가독성도 높아집니다.
1. Promise의 3가지 상태 (state)
- 대기(pending): 비동기 처리가 아직 완료되지 않은 상태
- 이행(fulfilled): 비동기 처리가 완료되어 결과값을 반환한 상태
- 거부(rejected): 비동기 처리가 실패하거나 오류가 발생한 상태
Promise 객체를 생성할 때는 new 키워드를 사용합니다. Promise 객체의 생성자 함수는 인자로 executor 함수를 받습니다. executor 함수는 resolve와 reject 두 개의 콜백 함수를 인자로 받으며, 비동기 처리가 완료되면 resolve 함수를 호출하여 이행(fulfilled) 상태로 전환하고, 오류가 발생하면 reject 함수를 호출하여 거부(rejected) 상태로 전환합니다.
2. 예제 코드
const promise = new Promise((resolve, reject) => {
// 비동기 처리 작업
if (/* 비동기 처리 성공 */) {
resolve(/* 결과값 */);
} else {
reject(/* 오류 메시지 */);
}
});
Promise 객체의 상태를 확인하기 위해서는 then() 메서드나 catch() 메서드를 사용합니다. then() 메서드는 Promise 객체가 이행 상태일 경우 실행되며, 결과값을 인자로 받습니다. catch() 메서드는 Promise 객체가 거부 상태일 경우 실행되며, 오류 메시지를 인자로 받습니다.
promise.then((result) => {
// 이행 상태일 때 실행되는 코드
}).catch((error) => {
// 거부 상태일 때 실행되는 코드
});
Promise 객체를 이용하면 비동기 작업을 순차적으로 실행할 수 있습니다. 이를 Promise 체이닝(Promise chaining)이라고 합니다. 이때, then() 메서드에서 다시 Promise 객체를 반환하면 다음 then() 메서드에서 이어서 처리할 수 있습니다.
promise
.then((result1) => {
// 비동기 작업 1
return newPromise;
})
.then((result2) => {
// 비동기 작업 2
return anotherPromise;
})
.then((result3) => {
// 비동기 작업 3
})
.catch((error) => {
// 오류 처리
});
3. Promise.all()
Promise.all() 메서드를 사용하면 여러 개의 Promise 객체를 동시에 실행하고, 모든 Promise 객체가 이행되면 결과값을 배열로 반환합니다. Promise.race() 메서드를 사용하면 여러 개의 Promise 객체를 동시에 실행하고, 가장 먼저 이행된 Promise 객체의 결과값을 반환합니다.
Promise.all([promise1, promise2, promise3])
.then((results) => {
// 모든 Promise 객체가 이행되면 실행됨
// results는 Promise 객체의 결과값을 배열로 반환함
})
.catch((error) => {
// 오류 처리
});
Promise.race([promise1, promise2, promise3])
.then((result) => {
// 가장 먼저 이행된 Promise 객체의 결과값을 반환함
})
.catch((error) => {
// 오류 처리
});
4. 주의할 점
Promise를 사용할 때 주의할 점은 다음과 같습니다.
- Promise 객체를 생성할 때는 반드시 executor 함수를 정의해야 합니다. executor 함수를 정의하지 않으면 Promise 객체가 생성되지 않습니다.
- Promise 객체의 상태는 변경될 수 없습니다. 즉, Promise 객체가 이행되거나 거부된 후에는 다시 이행되거나 거부될 수 없습니다.
- then() 메서드나 catch() 메서드를 사용할 때는 항상 반환된 Promise 객체를 사용해야 합니다. 새로운 Promise 객체를 생성하지 않고 이전 Promise 객체를 그대로 사용하는 것이 중요합니다.
- Promise 객체를 연속적으로 체이닝할 때는 각각의 then() 메서드에서 반환된 Promise 객체를 다시 then() 메서드에 전달해야 합니다. 반환된 Promise 객체가 없으면 체이닝이 끊어질 수 있습니다.
- Promise 객체에서 발생한 오류를 catch() 메서드로 처리할 때는, 해당 Promise 객체에서 발생한 오류만을 처리해야 합니다. 만약 여러 개의 Promise 객체에서 발생한 오류를 한 번에 처리하려면, Promise.all() 메서드나 Promise.race() 메서드를 사용해야 합니다.
- async/await와 함께 사용할 때는 반드시 try...catch 문으로 오류를 처리해야 합니다. async 함수에서 발생한 오류는 일반적인 예외처리 방식으로 처리됩니다.
Promise 객체를 과도하게 사용하면 코드가 복잡해질 수 있습니다. 따라서, 필요한 경우에만 Promise 객체를 사용하고, Promise 객체를 잘 조합하여 코드를 간결하게 유지하는 것이 좋습니다.
'자바스크립트' 카테고리의 다른 글
[자바스크립트] async 와 await (0) | 2023.03.10 |
---|---|
[자바스크립트] 달력 만들기 예제 (0) | 2023.03.10 |
[자바스크립트] 콜백 함수 (callback function) (0) | 2023.03.09 |
[자바스크립트] 클로저 (closure) (0) | 2023.03.09 |
[자바스크립트] 렉시컬 환경 (Lexical Environment) (0) | 2023.03.09 |
댓글