[JavaScript] Promise

Promise

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

Promise API

• 주로 서버에서 받아온 데이터를 화면에 표시할 때 사용
• 비동기 API, 잡큐 혹은 마이크로태스크 큐를 사용
  (잡큐는 태스크 큐보다 우선 순위가 높음)

Promise의 3가지 상태

new Promise()로 프로미스를 생성하고 종료될 때까지 3상태를 갖음

1. Pending(대기)
비동기 처리 로직이 아직 완료되지 않은 상태
new Promise()메서드를 호출하면 대기 상태가 됨
호출시 콜백 함수를 선언할 수 있고, 콜백 함수의 인자는 resolve reject이다

new Promise(function(resolve, reject) {
  // ...
});

2. Fulfilled(이행)
비동기 처리가 완료되어 프로미스가 결과 값을 반환해준 상태
콜백 함수 인자 resolve 를 아래와 같이 실행하면 이행상태가 됨
이행 상태가 되면 then()을 이용하여 처리 결과 값을 받을 수 있음

function getData() {
  return new Promise(function(resolve, reject) {
    var data = 100;
    resolve(data);
  });
}

// resolve()의 결과 값 data를 resolvedData로 받음
getData().then(function(resolvedData) {
  console.log(resolvedData); // 100
});

3. Rejected(실패)
비동기 처리가 실패하거나 오류가 발생한 상태
reject를 아래와 같이 호출하면 실패(Rejected) 상태가 되고 실패한 이유를 catch()로 받을 수 있음

function getData() {
  return new Promise(function(resolve, reject) {
    reject(new Error("Request is failed"));
  });
}

// reject()의 결과 값 Error를 err에 받음
getData().then().catch(function(err) {
  console.log(err); // Error: Request is failed
}); 

Promise 메서드

• then() 성공했을 때 실행할 콜백 함수를 인자로 넘김
• catch() 실패했을 때 실행할 콜백 함수를 인자로 넘김
• finally() 성공/ 실패 여부와 상관없이 모두 실행할 콜백 함수를 인자로 넘김
• then(callback1,callback2) callback1의 자리에 성공, callback2의 자리에 실패메서드를 인자로 넘길 수 있음

Promise.all

Promise의 배열을 받아 모두 성공 시 각 Promise의 resolved 값을 배열로 반환
하나의 Promise라도 실패할 시, 가장 먼저 실패한 Promise의 실패 이유를 반환

Promise.all([
  promise1,promise2,promise3
])
	.then(values=> {console.log("모두성공: ", values)})
    .catch(e=> {console.log("하나라도실패: ", e)})  

Promise 메서드 체인

프로미스는 여러 개의 프로미스를 연결하여 사용할 수 있는 체이닝이 가능

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