Promise란?

비동기 처리에 사용되는 자바스크립트 객체
비동기 작업이 맞이할 성공 혹은 실패를 나타냄

프로미스라는 상자는 비동기 작업이 시작될 때 만들어지고, 비동기 작업이 완료되면 결과물로 채워진다.

이처럼 비동기 작업의 성공과 실패 여부에 따라 결과값과 에러가 반환된다.

이전 그림에서 대기, 성공, 실패는 state라 하고, 결과값과 에러 등은 result라고 한다.

• state의 종류: 대기(pending), 성공(fulfilled), 실패(rejected)

• state: 대기 = result: 언디파인드

• state: 성공 = result: 결과값

• state: 실패 = result: error객체

  

• resolve:
  비동기 작업이 완료됐다고 알려주는 함수,
  인자 - 비동기 작업의 결과물

• reject:
  비동기 작업이 실패했다고 알려주는 함수,
  인자 – 비동기 작업이 왜 실패했는지 알려주는 에러객체

  비동기 함수 사용하기 – then, catch, finally(프로미스 객체의 API들)

  비동기 작업 성공, 실패 여부에 따라 처리를 할 수 있다.
  

• then:
  비동기 작업이 완료된 후 성공(fulfilled)상태가 되면 인자로 받은 콜백함수 실행

• catch:
  비동기 작업이 완료된 후 실패(rejected)상태가 되면 인자로 받은 콜백함수 실행

• finally:
  프로미스의 성공, 실패 여부에 상관없이 무조건 실행되어야 하는 코드

프로미스 체이닝

then을 체인형태로 연결하는 기법
여러 개의 비동기 작업을 순서대로 수행할 수 있다.

만약 then 안에서 어떤 값이 리턴되면 값은 프로미스로 감싸져서 resolve된 상태로 다음 then으로 넘어간다.

fetch API

fetch 함수는 프로미스를 리턴하는 함수이다
그러므로 뒤에 then 등을 붙일 수 있다.

json()로 데이터를 JavaScript 객체로 변환하고, 그것을 콘솔로그로 출력했다.


catch도 체이닝이 가능하다.
장바구니에 담는 과정에서 에러가 난다면 옥수수를 넣게 했다.
addTocart에서 아무것도 넣지 않아 에러가 났기 때문에 catch로 넘어가서 옥수수를 리턴해주면 옥수수는 프로미스로 감싸져서 리졸브가 된 상태로 다음 then으로 넘어간다.

자바스크립트 비동기 프로그래밍 #3 | Promise 완벽 정리

Promise 를 사용하는 두 가지 방법, new Promise, Promise.resolve()