[JavaScript] Promise

Peter·2022년 3월 9일

JavaScript

목록 보기

7/9

Promise

const promise = new Promise((resolve, reject) => {
	if(성공) {
      resolve('성공');
    } else {
      reject('실패');
    }
})

Promise는 비동기 작업을 수행하기 위해 사용하고 생성자 함수를 통해 인스턴스 할 수 있다.
Promise는 resolve, reject 위치로 각각 함수를 인지로 받는다
작업이 성공하면 resolve를 실행
작업이 실패하면 reject를 실행

Promise 상태

Promise는 비동기적으로 실행되기 때문에 현재 상태를 확인할 수 있는 정보를 가지고 있다.

pending: 비동기 처리가 아직 수행되지 않은 상태
fulfilled: 비동기 처리되고 성공한 상태
rejected: 비동기 처리되고 실패한 상태
settled: 비동기 처리가 수행된 상태

Promise 후속 처리 메소드

Promise는 후속 처리 메소드를 통해 처리 결과를 별도로 이어받아 처리할 수 있다.

then

then 후속 메소드는 resolve, reject 라는 이름으로 각각 작업의 성공과 실패시 호출되는 함수들을 인자로 받는다.
then은 Promise를 반환한다

catch

비동기 처리과정에서 에러가 발생하면 호출된다
then 메소드를 처리 하는 과정에서 에러가 발생하면 호출된다
catch 또한 Promise를 반환한다

Promise의 에러 처리

then 활용

promise(wrongThing)
  .then(res => console.log(res), err => console.error(err));

Promise로 비동기 작업 처리를 하는 과정에서 에러 발생시 두번째 인자로 넘겨받은 콜백 함수를 통해 에러를 처리 가능하다.

promise(wrongThing)
  .then(res => console.log(res))
  .then(undefined, err => console.error(err));

then으로 에러를 처리할 때 이전 단계에서 발생하는 에러만 처리 가능하다는 단점이 있다.
then 메소드를 사용하면서 예상 가능한 오류가 명확할때 다음 then에서 처리가 가능하다.

catch 활용

promise(wrongThing)
  .then(res => console.log(res))
  .then(res => console.log(res))
  .then(res => console.log(res))
  .catch(err => console.error(err));

catch메소드를 통해 에러를 처리할 수 있다.
여러번의 then을 사용하더라도 그 과정에서 에러가 발생하면 catch가 호출된다.

Promise의 체이닝

promise(wrongThing)
  .then(res => console.log(res))
  .then(res => console.log(res))
  .then(res => console.log(res))
  .catch(err => console.error(err));

계속적으로 연결되는 비동기 작업들을 콜백패턴으로 처리하려면 콜백헬에 빠지게 된다.
따라서 Promise의 then, catch를 통해 체이닝형태로 비동기 작업들을 처리할 수 있다.

Promise 정적 메소드

Promise.resolve

const resolve = Promise.resolve('성공');
resolve.then(console.log); // '성공'

const resolve = new Promise(resolve => resolve('성공'));
resolve.then(console.log); // '성공'

resolve 정적메소드는 then의 resolve 함수의 인자로 래핑해준다
위 두 작업은 같은 결과를 가진다

Promise.reject

const resolve = Promise.reject('실패');
resolve.catch(console.log); // '실패'

const resolve = new Promise((resolve, reject) => reject('실패'));
resolve.catch(console.log); // '실패'

reject 정적메소드 또한 catch, 또는 reject 함수의 인자로 래핑해준다
위 두 작업 또한 같은 결과를 가진다.

Promise.all

Promise.all은 다수의 Promise를 처리할 때 사용한다. Promise들이 담긴 배열 등으로 넘겨 받아 병렬로 처리한다

Promise.all([
  new Promise(resolve => setTimeout(() => resolve(1), 3000)), // 1
  new Promise(resolve => setTimeout(() => resolve(2), 2000)), // 2
  new Promise(resolve => setTimeout(() => resolve(3), 1000))  // 3
]).then(console.log) // [ 1, 2, 3 ]
  .catch(console.log);

Promise.all은 배열을 넘겨 받는다.
작업이 끝나는 순서와 관계없이 순서를 보장한다
각 결과를 순서대로 담은 배열을 resolve로 넘겨준다

Promise.all([
  new Promise((resolve, reject) => setTimeout(() => reject(new Error('Error 1!')), 3000)),
  new Promise((resolve, reject) => setTimeout(() => reject(new Error('Error 2!')), 2000)),
  new Promise((resolve, reject) => setTimeout(() => reject(new Error('Error 3!')), 1000))
]).then(console.log)
  .catch(console.log); // Error: Error 3!

배열에 속함 Promise들중 하나라도 실패하면 catch를 호출한다
성공, 실패가 혼합된 형태로 처리되는 것이 아닌 가장 먼저 발생한 에러를 처리하게 된다.

Promise.race

Promise.race([
  new Promise(resolve => setTimeout(() => resolve(1), 3000)), // 1
  new Promise(resolve => setTimeout(() => resolve(2), 2000)), // 2
  new Promise(resolve => setTimeout(() => resolve(3), 1000))  // 3
]).then(console.log) // 3
  .catch(console.log);