Promise

heejung·2022년 5월 15일
0
post-custom-banner

Promise API

  • 비동기 API 중 하나
  • 잡 큐를 사용함
  • 우선순위 : 잡 큐 > 태스크 큐
setTimeout(() => {
	console.log("타임아웃 1");
}, 0);

Promise.resolve().then(() => console.log("프로미스 1"));

setTimeout(() => {
	console.log("타임아웃 2");
}, 0);

Promise.resolve().then(() => console.log("프로미스 2"));

// 프로미스 1 프로미스 2
// 타임아웃 1 타임아웃 2

위와 같이 태스크 큐에 담기는 setTimeout 보다 잡 큐에 담기는 Promise 가 먼저 실행된다.


Promise

  • 비동기 작업을 표현하는 자바스크립트 객체
  • 비동기 작업의 진행, 성공, 실패 상태를 표현
  • 비동기 처리의 순서를 표현할 수 있음

Promise 생성자

// 콜백 함수는 resolve, reject 두 인자를 받음
let promise = new Promise((resolve, reject) => {
  // promise 실패 시 reject 호출
  if (Math.random() < 0.5) {
  	return reject("실패")
  }
  
  // promise 성공 시 resolve 호출
  resolve(10)
})

promise 메소드

promise
  // 성공 시 실행
  .then(data => {
  	console.log("성공: ", data)
  })
  // 실패 시 실행
  .catch(e => {
  	console.log("실패 : ", e)
  })
// 성공과 실패 여부 상관없이 실행
  .finally(() => {
  	console.log("promise 종료")
  })

then/catch 메소드가 또 다른 promise를 리턴하여 비동기 코드에 순서를 부여할 수도 있다. 함수를 호출한 주체가 함수를 끝낸 뒤 자기 자신을 리턴하도록 하여 구현한다.

이렇게 동일한 객체에 메소드를 연결할 수 있는 것을 체이닝(chaining)이라 한다.

promise
  .then(data => {
  	return fetchUser(data)
  })
  .then(user => {
  	console.log('User : ', user)
  })
  .catch(e => {
  	console.log("실패 : ", e)
  })

Promise.resolve / Promise.reject

  • resolve 는 성공한 Promise 를 바로 반환
  • reject 는 실패한 Promise 를 바로 반환
  • 인위적으로 Promise 메소드 체인을 만들 수 있음
  • 비동기 코드로 진행해야 하는 상황 등에 유용하게 사용 가능
Promise
  .resolve(10)
  .then(console.log)

Promise
  .reject("Error")
  .catch(console.log)

// 10
// Error

Promise.all

  • all은 Promise 의 배열을 받아 모두 성공 시 각 Promise 의 resolved 값을 배열로 반환
  • 하나의 Promise 라도 실패 시, 가장 먼저 실패한 Promise 의 실패 이유를 반환
Promise.all([
  promise1,
  promise2,
  promise3
])
  .then(values => {
  	console.log("모두 성공 : ", values)
  })
  .catch(e => {
  	console.log("하나라도 실패 : ", e)
  })
profile
프론트엔드 공부 기록
post-custom-banner

0개의 댓글