45 Promise 이해하기

공부하다가 내가 이해한대로 적어보는 Promise

Promise 도입 이유

비동기 함수 호출시 내부 비동기로 작동하는 코드가 완료되지 않아도 즉시 종료, 즉 예측히 어렵고 기대한대로 동작하지 않음.

아래 그림처럼 조련되지 않은 강아지. 같은 느낌??

하지만, Promise는 조련이 잘된 강아지라 예상된 값을 가져오고, 값을 잘 관리하기 쉬운 장점이 있음 .

Promise 흐름

먼저,

new Promise((reseolve, reject) =>{
	비동기 처리 수행 
    if(비동기 성공) {
        resolve('result');
        }else{ //실패 
          reject('failure reason');
       }
}) 

처음에 Promise가 실행되면, pending이 됨, 예를들어, 새를 사냥하는데 성공적일경우 (fulfilled상태) , resolve 라는 강아지가 가서 값을 가져오고, (결과를 보고 결과에 따라서 강아지 1마리만 내보냄)

실패,놓칠경우에는 reject이라는 강아지가 가서 탄피나 결과물 말고 다른 것들을 가져옴.

가져올때 바로 값을 가져오는건 아니고, 먼저 보라색, reject 강아지는 catch를 지나서 오면서 promise를 리턴하고, 때에 따라 finally로 후속처리 예 밥을 준다던가..

resolve 강아지는, then을 지나서 오는데, 이때 오다가 에러가 있을경우 문제가있을 경우에는 catch를 거쳐서 에러를처리한뒤에 Promise를 리턴한다. 때에 따라 finally로 후속처리

finally는 강아지 resolve, reject 상관없이 수행시 지나는 관문.

위의 코드처럼 함수로 호출도 되지만 정적 메소드로도 호출되는 resolve, reject

const res = Promise.resolve([1,2,3]);
res.then(console.log)  ///[1,2,3] 

위 아래 동일함 
const res = new Promise(resolve =>resolve([1,2,3]));
res.then(console.log)  ///[1,2,3] 


const rej = Promise.reject(new Error('error'));
rej.catch(console.log)  ///Error :error 

위 아래 동일함 
const rej = new Promise((_,reject) => reject(new Error('error')));
rej.catch(console.log)  ///Error :error 

또 다른 메서드로는 Promise.all Promise.race Promise.allSettled 이 있음
먼저, 아래 그림처럼 Promise 가 여러개있을 경우 사용하고 all 버튼을 누르면 강아지들의 집 문이 동시에 열리고 강아지를 내보냄. 이때, 도착 순서 없이 집 순서대로 강아지를 줄 맞추는게 all이고,

집 순서 상관없이 강아지를 오는 순으로 결과물을 받는게 race

allSettled는 ES11 2020년에 도입되었는데, fulfilled reject 상관없이 모든 처리 결과 담겨져있음. (모든 강아지 다 내보내서 받아옴)

Promise 관련해서 알아두면 좋을 내용

• 마이크로 큐 : 프로미스 후속처리 메서드의 콜백함수는 마이크로 큐에 저장되는데,(then,catch,finally 안의 함수) 이것은 일반적인 콜백함수 (태스크 큐에 보통 저장) 보다 우선순위가 높다.

• fetch : XMLHttpRequest 처럼 HTTP요청 전송 하는 클라이언트 사이드 web API 프로미스를 지원하고 사용법이 간단함(그래서 then, catch, fianlly사용가능)

	const promise = fetch(url, [option]);