Promise
-
자바스크립트에서 제공하는 비동기작업을 좀 더 간편하게 처리할 수 있도록 도와주는 기능. (ES6 도입)
-
정해진 장시간의 기능을 수행하고 나서 정상적으로 기능의 수행되어졌다면, 성공의 메시지와 함께 처리된 결과값을 전달해줌.
-
만약 기능 수행하다가 예상치 못한 문제가 발생했다면,
error를 전달. -
Promise는 Javascript안에 내장되어 있는 object로 비동기적인 것을 수행할 때callback함수 대신 유용하게 사용할 수 있음!
(비동기 작업이 많아질 경우,callback함수로 처리하게 되면 코드가 쉽게 난잡해지기 마련~~!)
🔎 Promise의 2가지 포인트!
1) State
✔ 프로세스가 무거운 오퍼레이션을 수행하고 있는 중인가?
✔ 아니면 이 기능 수행이 다 완료가 되어서 성공했는가?
✔ 실패했는가?
=> 이런 '상태'에 대해 이해하는 것 중요!!📍
pedding:Promise가 만들어 져서 우리가 지정한 오퍼레이션을 수행 중일 때.
📍fulfuilled: 이 오퍼레이션을 성공적으로 다 끝내게 될 때.
📍rejected: 파일 찾을 수 없거나 네트워크 문제 생겼을 때.
2) Producer, consumer 차이점 알기
우리가 원하는 데이터를 제공하는 사람(Producer)과, 제공된 데이터를 필요로 하고 쓰는 사람(consumer).
=> 두사람의 차이점 잘 이해하기.📍
Promise에는 우리가 원하는 기능을 수행해서 해당하는 데이터를 만들어내는 producer(promise object)와우리가 원하는 데이터를 소비하는 consumer가 있다~!!
🔎 코드 작성
1) 1초뒤에 성공 (resolve)
> 코드
const myPromise = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('result');
}, 1000)
});
myPromise.then(result => {
console.log(result);
})
> 출력
result📍
Promise끝나고 실행할 작업을.then에 설정하기.
2) 1초뒤에 실패 (reject)
> 코드
const myPromise = new Promise((resolve, reject) => {
setTimeout(() => {
reject(new Error());
}, 1000)
});
myPromise.then(result => {
console.log(result);
}).catch(e => {
console.error(e);
})
> 출력
Error
📍 error handling
=>then이라는 API이용해서 성공적인 케이스를 잘 다뤘다면,catch라는 함수 사용해서 에러 발생했을 때 어떻게 처리할 건지 콜백함수 등록해주면 됨. (.catch로error잡아내기 )
📍Promise에then을 호출하게 되면then은 결국 똑같은Promise를 return하기 때문에 그 return된Promise에catch를 다시 호출할 수 있음.
=>Promise에서then을 호출하게 되면 다시Promise가 return이 되고, return된Promise에catch를 등록하는 것.
3) 값이 5일때 실패
> 코드
function increasePrint(n) {
return new Promise((resolve, reject) => {
setTimeout(()=>{
const value = n + 1;
if(value === 5){
const error = new Error();
error.name = 'ValueIsFiveError' // error 이름 지정하기.
reject(error);
return;
}
console.log(value);
resolve(value);
}, 1000)
});
}
increasePrint(0).then(increasePrint)
.then(increasePrint)
.then(increasePrint)
.then(increasePrint)
.then(increasePrint)
.catch(e =>{
console.error(e);
})
> 출력
1
2
3
4
ValueIsFiveError
📍
Promise를 사용하면 비동기 작업이 많아지더라도 코드의 깊이가 깊어지지 않음.
📍 but !! 불편한 점도 있음.
- 에러를 잡을 때 어떤 부분에서 에러가 발생했는지 파악하기 어려움.
- 특정 값을 공유해가면서 작업을 연달하서 하기 번거로움.
=> 이런 단점 때문에 사용하는 문법 :async,await
🎯 알고가기!!
✨ Promise에 생성자를 보면,
executor라는 callback함수를 전달해 줘야 하고, 이 callback함수에는 또 다른 두개의 callback함수를 받는다.
resolve콜백함수 : 기능을 정상적으로 수행해서 마지막에 최종 데이터를 전달.
reject콜백함수 : 기능을 수행하다가 중간에 문제가 생기면 호출하게 될 콜백함수.✨ Promise object를 만들 때 우리가 비동기적으로 수행하고 싶은 기능들을 코드를 작성하고 나서,
성공적으로 잘했다면 resolve를 호출, 실패했다면 reject로 실패한 것과 왜 실패했는지 Error를 전달한다.
그래서 나중에 Promise를 이용해서 then과 catch를 이용해서 성공한 값 or 실패한 error를 받아와서 우리가 원하는 방식으로 처리하면 된다.
최근에 추가된 것이 finally()
✨ finally는 실패 성공과 상관 없이, 무조건 마지막에 호출되어지는 것.
=>>성공 실패와 상관없이 어떤 기능을 마지막에 수행하고 싶을 때 finally 사용하면 됨~~!
✨ 보통 Promise안에서 무거운 일들을 한다.
네트워크에서 데이터 받아오거나, 파일에서 무언가 큰 데이터를 읽어오는 과정은 시간이 꽤 걸린다.
이런 것을 동기적으로 처리하면 파일을 읽어오고, 네트워크에서 데이터를 받아오는 동안
그 다음 라인의 코드가 실행되지 않기 때문에 시간이 조금 걸리는 일들은 Promise를 만들어서 비동기적으로 처리하는 것이 좋다. 그래서 네트워크 통신, 파일 읽어 오기 등은 비동기적으로 처리하는 것이 좋다.
✨ Promise를 만드는 순간 우리가 전달하는 executor라는 콜백함수가 바로 실행이 되는 것을 확인 할 수 있다.
-
만약
Promise안에 네트워크 통신하는 코드를 작성했다면,Promise가 만들어지는 그 순간 바로 네트워크 통신을 수행하게 됨.
=>여기서 중요한 포인트는!! 만약 네트워크 요청을 사용자가 요구했을 때만 해야 하는 경우라면, 즉, 사용자가 버튼을 눌렀을 때 네트워크 요청을 해야 하는 경우라면,사용자가 요구하지도 않았는데 불필요한 네트워크 통신이 일어날 수 있게 됨. 그래서Promise를 만드는 순간 그 안에 전달한executor라는 콜백함수가 바로 실행되기 때문에 이점을 유의해서 공부해야 함. -
새로운
Promise가 만들어질 때는, 우리가 전달한executor라는 콜백함수가 바로 실행된다. 자동적으로 !!
=> 꼭 염두해서 코드작성하기!!
