Promise

지환·2024년 6월 23일
0

자바스크립트

목록 보기
29/30
  • ES6에서 비동기 처리를 위한 새로운 패턴으로 프로미스를 도입했음.

    비동기처리 - 기존 콜백 패턴의 단점

 let g = 0;
 setTimeout(()=>{
 	g = 100;
 
 }, 0);


console.log(g);

g의 값은 바뀌었을까?

  • 실제로는 변수 g의 값은 변경되지 않는다.

  • setTimeout의 콜백함수가 콜 스택으로 이동해서 실행되는 시점에는 이미 console.log 함수가 끝난 시점이기 때문에

따라서 비동기 함수의 처리결과에 대한 후속 처리는 비동기 함수 내부에서 수행해야함.

  • 이 때 후속처리를 위한 비동기 함수를 콜백 함수로 전달 하는 것이 일반적이다.

  • 콜백 지옥과 같은 문제를 해결하기 위해서 생겨난 부분이 프로미스

프로미스 생성

  • Promise 생성자 함수를 new 키워드와 함께 호출

  • Promise 생성자 함수는 비동기 처리를 수행할 콜백 함수를 인수로 전달 받는다.

    • reject와 resolve를 인수로 전달
const promise = new Promise((resolove, reject) => {

	if(비동기 처리 성공) {
    	resonve('result');
    }else {
    	reject('failure Error');
    }
})

프로미스 후속 처리 메소드

  • 프로미스 fulfilled 상태 : 처리 결과를 가지고 무언갈 수행함.

  • 프로미스 rejected 상태 : 프로미스의 처리결과를 가지고 에러 처리 수행

Promise.prototype.then

  • 첫 번째 콜백함수
    • 프로미스 fulfilled 상태(resolve 함수가 호출된 상태)가 되면 호출
    • 콜백 함수는 프로미스의 비동기 처리 결과를 인수로 전달받음
new Promise((resolve) => resolve("fulfilled")).then(
  (v) => console.log(v),
  (e) => console.error(e),
);
// fulfilled

new Promise((_, reject) => reject(new Error("rejected"))).then(
  (v) => console.log(v),
  (e) => console.error(e),
);
// Error: rejected
  • then 메소드는 "언제나 프로미스 반환"

Promise.prototype.catch

  • 프로미스가 rejected 상태(reject 함수가 호출된 상태)인 경우만 호출
new Promise((_, reject) => reject(new Error("rejected"))).catch((e) => console.log(e)); // Error: rejected

// 위에 catch 문과 같은 기능을 하는 then 버전
new Promise((_, reject) => reject(new Error("rejected"))).then(undefined, (e) => console.log(e)); // Error: rejected

Promise.prototype.finally

  • 프로미스의 성공 또는 실패와 상관없이 무조건 한 번 호출된다.

  • 프로미스의 상태와 상관없이 공통적으로 수행해야 할 처리 내용이 있을 때 유용함

profile
아는만큼보인다.

0개의 댓글