[JavaScript] Promise(비동기 처리)

Promise

자바스크립트 비동기 처리에 사용되는 객체

주로 서버에서 받아온 데이터를 화면에 표시할 때 사용

 

예시, API를 사용한 서버와의 요청-응답

 

사용법

new Promise(이행, 거부)

Promise의 3가지 상태(Status)

Pending(대기) : 비동기 처리 로직이 아직 완료되지 않은 상태

Fulfilled(이행) : 비동기 처리가 완료되어 프로미스가 결과 값을 반환해준 상태

Rejected(실패) : 비동기 처리가 실패하거나 오류가 발생한 상태

 

Pending(대기)

new 키워드를 사용한 Promise() 호출

new Promise((resolve, reject) => {})

Fulfilled(이행)

Promise의 콜백 함수 인자 중 첫 번째 인자를 실행

이행 상태가 되면 then 메서드를 이용하여 처리 결과 값을 받을 수 있음

new Promise((resolve, reject) => resolve())

resolve()의 결과 값을 then 메서드 파라미터의 callback함수 인자로 받음

var promise = new Promise((resolve, reject) => resolve('Fulfilled!!'))

// resolve()의 값을 then 메서드의 callback함수 인자로 받음
promise.then(fulfill => console.log(fulfill))  // Fulfilled!!

Rejected(실패)

Promise의 콜백 함수 인자 중 두 번째 인자를 실행

실패 상태가 되면 catch 메서드를 이용하여 처리 결과 값을 받을 수 있음

new Promise((resolve, reject) => reject())

reject()의 결과 값을 catch 메서드 파라미터의 callback함수 인자로 받음

var promise = new Promise((resolve, reject) => reject('Rejected!!'))

// reject()의 값을 catch 메서드의 callback함수 인자로 받음
promise.catch(err => console.log(err))  // Rejected!!

---

Promise.prototype.then()

Promise를 리턴하고 parameter로 두 개를 받는다.

첫 번째 : Promise가 이행했을 때

두 번째 : Promise가 거부했을 때

 

사용법

promise.then(onFulfilled, onRejected)

promise.thne(value => {
  // 이행
}, reason => {
  // 거부
})

---

Promise.prototype.catch()

Promise 반환하여 거부된 경우만 다룸

Promise.prototype.then(undefined, onRejected)를 호출한 것과 동일하게 행동

 

사용법

promise.catch(onRejected)

promise.catch(reason => {
  // 거부
})