Today's/DevelopStory
[JavaScript] promise
Axis
2021. 7. 4. 22:38

promise 란?
비동기 연산이 종료된 이후 결과를 알기 위해 사용하는 객체이다.
코드의 형태 :
const promise = new Promise((resolve, reject) => {
if(...){
...
resolve("성공!");
}else{
...
reject("실패!");
}
});
promise는 생성자 함수 Promise(new 키워드)를 통해 생성한다.
비동기 처리가 성공하면 resolve, 실패하면 reject를 호출한다.
비동기 작업을 수행할 콜백 함수를 인자로 전달받아 사용한다.
사용 예시 :
let promise = new Promise((resolve, reject) => {
setTimeout(() => resolve("완료!"), 1000);
// 1,000 밀리세컨드 즉 1초가 지난 후 비동기 처리가 완료됨
// 성공할 경우 resolve 인자에 "안녕!" 이라는 문구를 할당하여 반환 함
});
// resolve
promise.then(result => {console.log(result);}, error => {console.log(error);
//primise.them(성공 시 result라는 인자, 실패 시 error라는 인자 반환)
});

1. Promise의 상태값 :
pending: 비동기 처리 수행이 아직 완료되지 않음 (resolve, reject가 아직 호출되지 않음)
fulfilled: 수행이 성공하여 resolve가 호출된 상태
rejected: 수행이 실패하여 reject가 호출된 상태
settled: 비동기 처리 수행이 완료된 상태 (resolve든 reject든 호출이 된 상태)
2. 후속 처리 메서드 :
promise로 구현된 비동기 함수를 호출하는 측에서는 해당 promise 객체의
후속 처리 메서드를 통해서 비동기 처리 결과를 받아야 한다.
.then(성공시 인자, 실패시 인자) // 첫번째 인자만 작성해도 된다.
.catch(실패시 인자)
3. promise chaining(프라미스 체이닝) :
후속 처리 메서드를 체이닝해서 여러 개의 프라미스를 연결할 수 있다.
(콜백 헬을 해결하는 방법)
사용 예시 :
new Promise((resolve, reject) => {
setTimeout(() => resolve("promise 1"), 1000);
}).then((result) => { // 후속 처리 메서드 하나를 쓰고,
console.log(result); // promise 1
return "promise 2";
}).then((result) => { // 이렇게 연달아 then을 써서 이어주는 거예요.
console.log(result);
return "promise 3";
}).then(...);