JavaScript | Promise

xoxobabegirl·2021년 5월 2일
0

Promise

Promise: 비동기를 간편하게 처리할 수 있도록 자바스크립트에서 제공하는 object

정해진 시간동안 기능을 수행하고 나서 성공 했다면 성공 메세지 & 처리 결과 값을 보여주고 에러를 띄워줌

Promise에서 알아야 할 2가지 부분

  1. state
    process가 무거운 오프레이션을 수행하고 있는지 아니면 수행에 성공했는지, 실패했는지 이해하는 것
  2. producer, consumer의 차이점 알기
    데이터를 제공하는 사람과 쓰는 사람의 다른 견해를 이해하기

state : pending -> fullfilled or rejected

producer

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는 불필요한 요청을 할 수 있음

consumers

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 생략 가능

(드림코딩 유튜브 영상을 보고 정리한 내용)

profile
Frontend Developer 👩🏻‍💻👩‍💻

0개의 댓글