Promise
: 비동기를 간편하게 처리할 수 있도록 자바스크립트에서 제공하는 object
정해진 시간동안 기능을 수행하고 나서 성공 했다면 성공 메세지 & 처리 결과 값을 보여주고 에러를 띄워줌
state
: pending -> fullfilled or rejected
const promise = new Promise((resolve, reject) => {
//heavy work
console.log('doing something...')
setTimeout(() => {
//resolve('sucess!')
reject (new Error('no network'))
//Error는 object
}, 2000)
})
/*파일 업로드, 큰 데이터를 받아오는 작업을 비동기로 수행.
만약 heavy한 작업을 동기적으로 수행하면 해당 작업을 실행하는 동안 다른 작업을 실행할 수 없음*/
promise는 만드는 순간 exector 콜백 함수가 자동적으로 실행됨
네트워크 요청을 사용자가 원하는 순간에 해야한다면 promise는 불필요한 요청을 할 수 있음
then
, catch
, finally
를 사용
promise
.then((value) => {
console.log(value)
})
.catch(error => {
console.log(error)
})
.finally(() => {
console.log('finally')
});
//'success'가 콘솔에 뜸
//resolve로 전달한 값이 value에 들어와서 콘솔에 찍힘
//finally의 경우에는 성공/실패 여부 상관 없이 무조건 제일 마지막에 호출
then
은 promise도 전달 가능
then
으로 promise chain 가능! .then을 써서 계속 원하는 걸 실행할 수 있음
받아서 바로 함수에 전달하는 경우는 받아오는 value 생략 가능
(드림코딩 유튜브 영상을 보고 정리한 내용)