[javascript정리] Promise 비동기 처리

Kyungoh Kang·2021년 2월 6일
0

javascript 정리

목록 보기
7/7

Promise

= Promise 객체는 비동기 작업이 맞이할 미래의 완료 또는 실패와 그 결과 값을 나타냅니다.(MDN 정의)
= The Promise object represents the eventual completion (or failure) of an asynchronous operation and its resulting value.

==> 그냥 비동기 처리에 사용되는 객체라고 생각하면 될 것 같다. 비동기 처리의 결과값을 포함하는 객체라고 이해하면 될듯.

비동기 처리에서 promsie의 필요성

  1. 콜백함수를 이용했을 때 나타나는 '콜백 지옥'의 문제를 해결핼 수 있음.

  2. 코드의 가독성 올려줌

  3. 에러 처리 용이함.

promise 코드 예시

const myPromise = new Promise((resolve, reject) => {resolve(...); reject(...);})

= promise 내부에서 콜백 함수를 선언할 수 있고 그 함수는 resolve와 reject를 인자로 받는다.
= API통신을 예로 서버에서 데이터를 받아올 때 promise를 이용했다면 성공적으로 데이터를 받아오면 resolve, 에러가 있었으면 reject

promise의 상태

  1. pending
    = rosolve 혹은 reject 값이 호출되기 전까지는 대기 상태.
    = promise() 메서드가 실행되기 전까지는 대기상태.

  2. fulfilled
    = 비동기 작업이 에러 없이 마무리 되었을 때 resolve()가 실행되면 이행상태가 된다.
    = 이행 상태가 되면 .then()을 통해 결과값을 받아 처리할 수 있다.

  3. rejected
    = 비동기 작업 중 에러가 생겼을 때 reject()가 실행되면 실패 당태가 된다.
    = 실패 상태가 되면 .catch()를 통해 에러 처리를 할 수 있다.
    = 꼭 .catch()가 없어도 에러처리는 가능하지만 가독성을 올리고 더 많은 에러처리를 할 수 있게 가급적 .catch()를 이용해 에러를 처리한다.

promise 체이닝

= .then()을 여러개 붙여서 체이닝이 가능하다.

const myPromise = new Promise((resolve, reject) => {
  if(successful){
    resolve(1);
  }
  reject(error);
})
.then(res => console.log(res + 1)) // 2
.then(secondRes=>console.log(secondRes + 10)) // 12
.then(lastRes => console.log(lastRes + 100)) // 112

0개의 댓글