Promise

비지·2023년 10월 2일

자바스크립트기초

목록 보기
14/15

Promise API

  • Promise API는 비동기 API 중 하나이다.
  • 태스크 큐가 아닌 잡 큐(JOB queue, 혹은 microtask queue)를 사용한다.
  • 잡 큐는 태스크 큐보다 우선 순위가 높다

Promise 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

-> 프로미스 처리가 셋타임 보다 앞선다.

Promise

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

Promise 생성자

let promise = new
Promise((resolve, reject) =>
{
	if (Math.random() < 0.5) {
    	return reject("실패")
    }
    resolve(10)
})
  • new Promise(callback)
  • callback 함수는 (resolve, reject) 두 인자를 받는다.
  • Promise가 성공했을 때 resolve를 호출한다.
  • Promise가 실패했을 때 reject를 호출한다.

Promise 메서드

promise
	.then(data => {
    console.log("성공: ", data)
    })
    .catch(e => {
    console.log("실패: ", e)
    })
    .finally(() => {
	console.log("promise 종료")
    })
  • then() 메서드에 성공했을 때 실행할 콜백 함수를 인자로 넘긴다.
  • catch() 메서드에 실패했을 때 실행할 콜백 함수를 인자로 넘긴다.
  • finally() 메서드는 성공/실패 여부와 상관없이 모두 실행할 콜백 함수를 인자로 넘긴다.
  • then(callback1, callback2)로 callback1의 자리에 성공, callback2의 자리에 실패 메서드를 인자로 넘길 수 있다.

Promise 메서드 체인

Promise
	.then(data => {
    return fetchUser(data)
    })
    .then(user => {
    console.log('User : ', user)
    })
    .catch(e => {
	console.log("실패:", e)
    })
  • then/catch 메서드가 또 다른 promise를 리턴하여, 비동기 코드에 순서를 부여한다.
  • 이렇게 동일한 객체에 메서드를 연결할 수 있는 것을 체이닝(chaining)이라 한다.
  • 함수를 호출한 주체가 함수를 끝낸 뒤 자기 자신을 리턴하도록 하여 구현한다.

Promise.resolve, Promise.reject

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

Promise.all

Promise.all([
	promise1,
    promise2,
    promise3
    ])
    .then(values => {
    console.log("모두 성공: ", values)
    })
    .catch(e => {
    console.log("하나라도 실패: ", e)
    })
  • Promise.all은 Promise의 배열을 받아 모두 성공 시 각 Promise의 resolved 값을 배열로 반환한다.
  • 하나의 Promise라도 실패할 시, 가장 먼저 실패한 Promise의 실패 이유를 반환한다.
profile
나를 위한 업그레이드 아자아자

0개의 댓글