TIL 21 | JavaScript Promise

dydalsdl1414·2021년 3월 28일
0

사전스터디 

목록 보기
21/23
post-thumbnail

Promise??

  • promise란, 비동기 처리를 효율적으로 처리하기 위해 도입된 클래스(생성자 함수)의 한 종류이다.

  • 나쁜 가독성, 복잡도 증가 및 에러 처리 곤란 등 전통적인 콜백 함수 패턴의 단점들을 보완하며 비동기 처리 시점을 명확하게 표현할 수 있다.

  • 특정 기능이 실행되어 정상적으로 동작하면, 성공 메시지와 처리 결과를 전달하며 문제가 발생하면 에러를 전달할 수 있다.



How to use it?

1. Promise - producer

// producer
const promise = new Promise((resolve, reject) => {
  console.log('doing somethings...'); // => 바로 실행된다.
  setTimeout(() => {
    resolve('ellie');
    reject(new Error('no, network')); //'Error'는 Js에서 제공하는 object
  }, 2000);
});
  • Promise를 선언하는 순간, executor(콜백함수 부분)가 자동적으로 실행된다. 때문에 필요에 따라 setTimeout 메소드를 사용하여 이를 조정한다.

  • Promiseresolve, reject 두 개만의 인수만 받으며 출력 또한 둘 중 하나만 발생한다.

  • 비동기 처리가 성공할 시 resolve를 호출하며 실패할 시 reject 함수를 호출한다.

    • resolve: 일이 성공적으로 끝난 경우, 그 결과를 나타내는 값() 함께 호출된다.
    • reject: 에러 발생시, 에러를 나타내는 값()과 함께 호출된다. (일반적으로 new Error 에러 객체를 사용한다.)

2. Promise - consumer

promise.then(value => console.log(value));
//
promise.then(value => console.log(value)).catch(error => console.log(error));
//
promise.then(value => console.log(value)).finally(() => console.log('finally')
  • promise의 후처리 메소드는 then(), catch(), finally()등이 있다.

    • then: 정상적으로 수행된 실행 결과 (resolve)값을 받아 처리할 수 있는 메소드이다.

    • catch: 에러가 발생할 경우(reject)만 다루고 싶을때 사용하는 메소드이다.

    • finally: resolvereject, 즉 함수 실행의 성공 및 실패에 관계없이 실행된다.


3. Promise state

Promise는 3가지의 상태(states)를 가지며, 생성부터 종료까지의 처리 과정을 의미한다.

  • pending : 비동기 처리가 진행중이며 아직 완료되지 않은 상태 (대기)

  • fulfilled : 비동기 처리가 완료되어 프로미스가 결과 값을 반환해준 상태 (성공, resolve)

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



Reference

profile
블로그를 이전하였습니다 => "https://jymini.tistory.com"

0개의 댓글