자바스크립트에서 제공하는 비동기작업을 좀 더 간편하게 처리할 수 있도록 도와주는 기능. (ES6 도입)
정해진 장시간의 기능을 수행하고 나서 정상적으로 기능의 수행되어졌다면, 성공의 메시지와 함께 처리된 결과값을 전달해줌.
만약 기능 수행하다가 예상치 못한 문제가 발생했다면, error
를 전달.
Promise
는 Javascript안에 내장되어 있는 object로 비동기적인 것을 수행할 때 callback
함수 대신 유용하게 사용할 수 있음!
(비동기 작업이 많아질 경우, callback
함수로 처리하게 되면 코드가 쉽게 난잡해지기 마련~~!)
✔ 프로세스가 무거운 오퍼레이션을 수행하고 있는 중인가?
✔ 아니면 이 기능 수행이 다 완료가 되어서 성공했는가?
✔ 실패했는가?
=> 이런 '상태'에 대해 이해하는 것 중요!!📍
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
라는 콜백함수가 바로 실행된다. 자동적으로 !!
=> 꼭 염두해서 코드작성하기!!