비동기 처리
특정 코드의 연산이 끝날 때까지 코드의 실행을 멈추지 않고 다음 코드를 먼저 실행하는 자바스크립트의 특성을 의미한다.
상태는 프로미스의 처리과정을 의미.
1. Pending(대기) : 비동기 처리 로직이 아직 완료되지 않은 상태.
2. Fulfilled(이행) : 비동기 처리가 완료되어 프로미스가 결과 값을 반환해준 상태.
3. Rejected(실패) : 비동기 처리가 실패하거나 오류가 발생한 상태.
const promise = new Promise((resolve, reject) => {
// doing some heavy work (network, read files)
setTimeout(() => {
resolve('yonghyun'); // 성공한 경우
reject(new Error('에러 발생 이유')); // 실패한 경우
}, 2000);
});
=> 어떤 일을 2초정도 하다가 resolve라는 콜백함수를 호출하면서 yonghyun이라는 값을 전달해주는 Promise
Promise가 정상적으로 잘 수행이 되어서 마지막에 최종적으로 resolve라는 콜백함수를 통해서 전달한 값이 value에 parameter로 전달된다.
promise
.then((value) => { // 성공한 값
console.log(value); // yonghyun이 출력
})
.catch(error =>{ // 실패한 에러
console.log(error);
})
.finally(() => { // 성공, 실패 여부에 상관없이 무조건 실행
console.log('finally');
});
const fetchNumber = new Promise((resolve, reject) => {
setTimeout(() => resolve(1), 1000);
});
fetchNumber
.then(num => num * 2)
.then(num => num * 3)
.then(num => {
return new Promise((resolve, reject) => {
setTimeout(() => resolve(num - 1), 1000);
});
})
.then(num => console.log(num));
const getHen = () =>
new Promise((resolve, reject) => {
setTimeout(() => resolve('닭'), 1000);
});
const getEgg = hen =>
new Promise((resolve, reject) => {
setTimeout(() => resolve(`${hen} => 계란`), 1000);
});
const cook = egg =>
new Promise((resolve, reject) => {
setTimeout(() => resolve(`${egg} => 사탕`), 1000);
});
getHen()
.then(getEgg)
.catch(error => {
return '빵';
}) // 에러가 발생한 걸 바로 잡아낼 수 있다.
.then(cook)
.then(console.log)
.catch(console.log);