자바스크립트 비동기 처리 Promise

 

 

What is Promise?

 

The Promise object represents the eventual completion (or failure) of an asynchronous operation, and its resulting value.

 

Promise 객체는 자바스크립트의 비동기 처리에 사용되는 객체이며,

비동기 처리할 작업의 성공 또는 실패를 분리해서 코드를 실행하고 그에 대한 결과 값을 반환한다.

 

 

Promise의 상태

 

프로미스는 Promise 객체가 생성되고 종료될 때까지 3가지 상태를 가지고 있다.

 

• 대기(pending) : 비동기 처리 로직이 아직 이행하거나 거부되지 않은 초기 상태
• 이행(fulfilled) : 비동기 처리가 성공적으로 완료되어 결과 값을 반환한 상태
• 거부(rejected) : 비동기 처리가 실패한 상태

 

Promise 생성

 

기본 구조

new Promise((resolve, reject) => {
  //비동기 작업 진행
  if(작업성공값) {
    resolve(작업성공값); // fulfilled
  }
  reject(new Error());  // rejected
})

 

프로미스는 비동기 처리에 성공할 수도 있고 실패할 수도 있다.

따라서 성공할 때는 resolve를 호출해주고, 실패하면 reject를 호출해준다.

 

 

resolve 와 reject & Promise.then()

const promise1 = new Promise(function(resolve, reject) {
  setTimeout(function() {
    resolve('작업완료');
  }, 1000);
});

promise1.then(function(value) {
  console.log(value);
});

  // expected output: "작업완료"

 

resolve를 호출할 때 파라미터로 특정 값을 넣어주면, 작업이 끝난 후에 그 값을 사용할 수 있다.

그리고 작업이 끝나고 나서 바로 또 다른 작업을 이어서 해야할 때는 Promise 객체 뒤에 .then( ... ) 을 붙여서 사용한다.

 

 

Promise 여러 개 연결

 

프로미스는 then을 이용해 여러 프로미스 객체를 연결할 수 있다.

아래는 웹 서비스 사용자 로그인 인증 로직을 연결한 것이다.

 

getData(userInfo)
  .then(parseValue)
  .then(auth)
  .then(display)

 

유저 정보를 서버에서 불러오고,  파싱 작업하고, 인증하고, 화면에 출력하는 4개의 함수는 각각 프로미스를 반환해준다.

그리고 여러개의 프로미스는 .then() 으로 연결해서 처리할 수 있다.

 

 

Promise 에러 처리 방법

 

프로미스를 사용했을 때 통신 오류 또는 코드 문제 등으로 에러가 발생하여

프로미스가 정상적으로 처리가 되지 않을 경우도 있다.

이러한 상황을 대비하여 프로미스의 에러를 처리하는 방법이 있다.

 

.catch()

const promise1 = new Promise(function(resolve, reject) {
  reject('failed')
});

promise1.then().catch( 에러처리 코드 )

 

프로미스가 reject를 호출하게 되면 catch를 통해 에러가 났을 경우의 코드를 실행한다.

따라서 프로미스 객체를 생성 후 실행하고 나서는 꼭 catch로 에러 처리 코드를 넣어준다.

 

 

Promise 메서드

 

Promise.all(iterable)

 

: 파라미터에는 배열과 같이 순회 가능한 객체가 인자로 들어가고, 그 객체에는 여러 개의 프로미스가 들어간다.

 객체에 담긴 모든 프로미스가 실행되고 나면  프로미스들의 반환값들이 담긴 배열을 반환한다.

 하지만 프로미스들 중에 하나라도 실패하면 모두 실패한 것으로 간주되어 에러를 발생시킨다.

 

const promise1 = Promise.resolve(3);
const promise2 = 42;
const promise3 = new Promise(function(resolve, reject) {
  setTimeout(resolve, 100, 'foo');
});

Promise.all([promise1, promise2, promise3]).then(function(values) {
  console.log(values);
});
// expected output: Array [3, 42, "foo"]

 

Promise.race(iterable)

 

: 여러 개의 프로미스를 등록해서 실행했을 때 가장 빨리 끝난 한 개의 프로미스의 결과 값만을 반환한다.

  하지만 가장 빨리 끝났더라도 프로미스가 실패하면 이를 실패로 간주하고 에러를 발생시킨다.

 

const promise1 = new Promise(function(resolve, reject) {
    setTimeout(resolve, 500, 'one');
});

const promise2 = new Promise(function(resolve, reject) {
    setTimeout(resolve, 100, 'two');
});

Promise.race([promise1, promise2]).then(function(value) {
  console.log(value);
  // Both resolve, but promise2 is faster
});
// expected output: "two"

 

Promise.finally()

 

: 프로미스가 성공했든 실패했든간에 프로미스가 실행되고 나서 지정된 코드가 무조건 한 번 실행할 수 있도록 하는 메소드이다.

 

const promise1 = new Promise(function(resolve, reject) {
    setTimeout(resolve, 500, 'one');
});

const promise2 = new Promise(function(resolve, reject) {
    setTimeout(resolve, 100, 'two');
});

Promise.race([promise1, promise2])
  .then(function(value) { console.log(value); })
  .finally(console.log('finished';))
  
  //'two'
  //'finished'

 

 

 

 

참고

• MDN
• CAPTAIN PANGYO_Post