Promise 완벽 정리

Promise

• Promise는 비동기 동작을 처리하기 위해 ES6에 도입되었다. (처음엔 혁명 느낌)
• Promise는 클래스다.
• Promise 클래스를 인스턴스화 해서 promise 객체를 만든다.
• 반환된 promise로 원하는 비동기 동작을 처리한다.
• Promise는 일단 state와 resolve, reject 함수를 이해하면 된다.

 

promise 구현하기

let promise = new Promise(function(resolve, reject) {

// 여기 비동기 로직을 작성!

// 시켜놓고 언제 완료될지 모르는 로직!

});

• resolve는 성공했을 때 실행할 함수
• reject는 실패했을 때 실행할 함수

 

resolve

reject

Quiz

setTimeout은 비동기이기에 console.log 가 먼저 찍히고

프로미스는 한가지의 resolve만 리턴하기에 1 , 3 , 2  순서로 결과가 나오게 된다.

 

 

Promise Chaining

• 여러 개의 비동기 작업을 순차적으로 해야하는 경우가 많다.
• 순차적으로 각각의 작업이 이전 단계 비동기 작업이 성공하고 나서 그 결과값을 이용하여 다음 비동기 작업을 실행해야 하는 경우

promise의 resoleve 값은 1이므로

first 에 들어가는 인자는 1이고 return 값을 2를 보냈기에

그에 대한 결과물의 second에 들어가는 인자는 2 이다.

 

promise가 promise를 반환이 가능하다.

 

promise 3가지 상태

• promise 객체는 "상태"를 갖고 있습니다.
• Pending(대기): 비동기 처리 로직이 아직 완료되지 않은 상태
• Fulfilled(이행): 비동기 처리가 완료되어 프로미스가 결과 값을 반환해준 상태
• Rejected(실패): 비동기 처리가 실패하거나 오류가 발생한 상태

 

에러 처리 - catch

마지막으로 제일 중요한건

IE에서 사용이 불가능하다.

그러므로 javascript가 아닌 react를 이용해서 create-react-app으로 바벨의 발 아래서 만들어야한다.