0. 개요
먼저 자바스크립트는 기본적으로 동기적으로 운영된다는 것을 알아야한다. 그러나 그런 자바스크립트에게 비동기적으로 처리할 수 있는 방식들이 세가지가 있었는데, 그 중 하나는 Callback 함수를 이용하는 것이었다. 그러나 콜백함수를 이용하게 되면 일명 "콜백 지옥"에 빠질 수 있는 위험성이 있다. 그래서 콜백 함수 대신에 비동기적으로 자바스크립트를 처리하기 위한 방법 중 하나가 바로 프로미스이다.
1. 그래서 프로미스가 뭔데?
프로미스, 즉 Promise 한국어로 약속이라는 의미이다. 상당히 미래지향적 단어임을 눈치챘다면, 맞다. 프로미스는 비동기 작업이 미래에 성공할 것인지, 실패할 것인지의 결과 값을 나타낸다.
2. 프로미스의 4가지 상태값
Pending : 아직 결과 값이 반환되지 않은 대기 중인 상태
Fulfilled : 성공
Rejected : 실패
Settled : 결과 값이 성공 혹은 실패로 반환된 상태
3. 프로미스 생성자 예제
먼저 resolve 의 경우 (성공하는 경우)의 코드를 살펴보자.
const promise = new Promise((resolve, reject) => {
console.log('doing something ... ');
setTimeout(() => {
resolve('success!');
}, 2000);
});
new 를 통해 생성자를 생성하고, 작업을 수행한 뒤에 만약에 작업 수행이 성공하면 2초뒤에 success!를 반환하는 코드를 작성하여 보았다.
다음으로 reject 의 경우 (실패하는 경우)의 코드를 살펴보자.
const promise = new Promise((resolve, reject) => {
console.log('doing something ... ');
setTimeout(() => {
reject(new Error('no network'));
}, 2000);
});
4. 프로미스 사용자 예제
프로미스를 호출할 때는 then 과 catch 그리고 finally 메소드가 있다.
먼저, then 같은 경우에 사용법은 다음과 같다.
promise.then(value => {
console.log(value);
});
여기서 then 이란 resolve, 즉 성공했을 때의 인자를 받아온다.
따라서 콘솔에 찍히는 결과값은 다음과 같다.
// resolve => then 결과값
success !
다음으로 실패했을 경우인 catch 같은 경우에 사용법은 다음과 같다.
성공할 경우에다가 catch 를 붙이면 실패할 경우에는 어떻게 대처하는 지에 대한 메뉴얼이 된다.
promise
.then(value => {
console.log(value);
})
.catch(error => {
console.log(error);
});
콘솔에 찍히는 결과값은 다음과 같다.
// reject => catch 결과값
Error: no network
마지막으로 finally 는? 바로 성공하든 실패하든 마지막에 실행되는 메소드이다.
promise
.then(value => {
console.log(value);
})
.catch(error => {
console.log(error);
})
.finally(() => {
console.log('finally');
});
성공했을 때의 결과값
success !
finally
실패했을 때의 결과값
Error: no network
finally
