📌 Promise는 무엇인가
이름에서 알 수 있듯이 약속은 지켜지거나 깨진다. 따라서 Promise는 완료(유지)되거나 거부(파기)된다.
자바스크립트 비동기 처리를 위한 하나의 패턴으로 콜백 함수를 사용한다.
왜씀?
웹이 발전하고 규모가 커지면서 callback만으로는 모든 비동기 상태를 통제하기 어렵게 되었다. 그래서 ES6 에서 프로미스를 도입했다.
- 콜백헬은 가독성이 좋지않다.
- 에러가 날 경우 찾기 어렵다.
- 무엇보다 콜백은 결괏값을 바로 받아야 한다.
프로미스는 전통적인 콜백 패턴을 보완하고 비동기 처리 시점을 명확하게 표현할 수 있다.
또한 프로미스는 선언을 하고 나중에 결괏값을 받아서 실행 시킬 수 있는 장점이 있다.
ex) 코드
new Promise(executor)
let promise = new Promise(function(resolve, reject) {
// executor (성공, 실패)
}); resolve와reject는 자바스크립트에서 자체 제공하는 콜백함수이다- Promise 는 클래스 문법과 같이
new키워드와 생성자를 사용해 만든다. - 생성자는 매개변수로 executor라는 실행함수를 받는다.
- executor의 인자로
resolve,reject로 받으며 이 두개도 각 함수이다. - Promise를 즉시 실행할 수 도있고
then으로 호출하여 필요시에 사용할 수 도있다.
🔊 Promise의 상태
executor에선 결과를 즉시 얻든 늦게 얻든 상관없이 상황에 따라 인수로 넘겨준 콜백 중 하나를 반드시 호출해야 한다. 그중 알아야할 3가지 상태가 있다.
| 상태 | 의미 | 호출 |
|---|---|---|
pedding | 비동기 처리가 수행되지 않은 상태 (대기) | 함수호출 X |
fulfilled | 비동기 처리가 수행된 상태 (성공) | resolve 함수 호출 |
rejected | 비동기 처리가 수행된 상태 (실패) | reject 함수 호출 |
Promise생성자 함수가 인자로 전달받은 콜백 함수는 내부에서 비동기 처리 작업을 수행한다.- 비동기 처리가 성공하면 콜백 함수의 인자로 전달받은
resolve함수를 호출한다.- 프로미스는
fulfilled상태가 된다. 비동기 처리가 실패하면reject함수를 호출한다.- 프로미스는
rejected상태가 된다.
🎈 Promise를 사용해보자
1.프로미스 호출 없이 즉시 실행
//선언
const promise = new Promise(function(resolve, reject) {
resolve( console.log('성공!') )
}); // 성공
then과catch메서드를 사용하여 호출
코드예시) promise 함수 파라미터 값이 없으면 실패, 있다면 그 값을 출력 함
//선언
function promise(data){
return new Promise(function(resolve, reject) {
if(data === undefined){
reject('실패')
} else {
resolve(data)
}
});
// 호출
promise('성공했다').then(msg => console.log(msg)); // '성공했다'
promise().catch(msg => console.log(msg)); // '실패'
// catch 말고 then을 쓴다면
promise().then(msg => console.log(msg)); // Uncaught (in promise) 실패
catch 는 에러를 잡아줘서 에러 처리가 안나도록 한다.
then과 catch 는 API 호출과 같은 비동기 작업을 처리하는 데 사용된다.
🔗 체이닝
.then 을 이용하여 콜백 함수를 연결하여 사용한다.
1초마다 성공을 출력하는 함수인데 콜백 함수를 사용하면 콜백 헬이되지만
Promise 는 좀더 간결하게 코드를 작성할 수 있다.
function time(sec) {
return new Promise(function(resolve, reject) {
setTimeout(() => {
resolve('성공!')
},sec * 1000)
});
}
time(1)
.then((success)=>{
console.log(success)
return time(1)
})
.then((success)=>{
console.log(success)
return time(2)
})
.then((success)=>{
console.log(success)
return time(3)
}) // '성공!' '성공!' '성공!'
promise.all
promise.all 에 전달되는 Promise는 어느 하나라도 거부되는 순간 모든 요청이 거부됩니다. 따라서 직전 Promise가 거부된 직후에, 그 다음 요청이 then 메서드를 따라가는 것이 아니라, 모든 Promise 요청이 거부되면서 catch 메서드를 따라가게 된다.
const promise1 = fetch('url1')
const promise2 = fetch('url2')
const promise3 = fetch('url3')
Promise.all( [promise1,promise2,promise3] )
.then(res => res.json() )
.catch(err => console.log(err) )정리
프로미스는 resolve (성공) 결과값, reject (실패) 결과값을 둘 중 하나를 반드시 리턴한다.
resolve(value) — 일이 성공적으로 끝난 경우 그 결과를 나타내는 value와 함께 호출
reject(error) — 에러 발생 시 에러 객체를 나타내는 error와 함께 호출
콜백함수 보다 더 간결하게 사용가능하다.
프로미스의 resolve, reject는 비동기 작업의 처리과정에서 성공/실패를 구분하는 방법이다.
