JavaScript- Promise

※ 강의를 듣고 제가 이해한 것을 바탕으로 정리한 것이라서 오류가 있을 수 있습니다.

 

 

Promise

promise는 비동기 작업을 조금 더 편하게 처리 할 수 있도록 ES6 에 도입된 기능이다.

이전에는 비동기 작업을 처리 할 때에는 콜백 함수로 처리를 해야 했었는데

 콜백 함수로 처리를 하게 된다면 비동기 작업이 많아질 경우 코드가 쉽게 난잡해지게 되었는데

promise가 도입된 이후부터는 더 편하고 난잡해지지 않게 처리할 수 있게 되었다.

 

1. Promise를 사용하지 않고 콜백 함수로 구현한 경우

예를 들어 한번 숫자 n 을 파라미터로 받아와서 다섯번에 걸쳐 1초마다 1씩 더해서 출력하는 작업을 setTimeout 으로 구현할때 promise를 사용하지 않고 콜백 함수로 구현하면 비동기적으로 처리해야

하는 일이 많아질수록 코드가 아래와 같이 깊어지게 되고 복잡해진다.

function increaseAndPrint(n, callback) {
  setTimeout(() => {
    const increased = n + 1;
    console.log(increased);
    if (callback) {
      callback(increased);
    }
  }, 1000);
}

increaseAndPrint(0, n => {
  increaseAndPrint(n, n => {
    increaseAndPrint(n, n => {
      increaseAndPrint(n, n => {
        increaseAndPrint(n, n => {
          console.log('끝!');
        });
      });
    });
  });
});

실행 결과

 

 

2. promise를 사용한 경우

 

1) Promise 만들기

const myPromise = new Promise((resolve, reject) => {
  // 구현..
})

Promise는 이와 같이 만드는데

Promise 는 성공 할 수도 있고, 실패 할 수도 있다. 성공 할 때에는 resolve 를 호출해주면 되고 실패할 때에는 reject 를 호출해주면 된다. 지금 당장은 실패하는 상황은 고려하지 않고 1초 뒤에 성공시키는 상황에 대해서만 구현을 해보면 다음과 같다.

 

const myPromise = new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(1);
    }, 1000);
  });
  
  myPromise.then(n => {
    console.log(n);
  });

resolve 를 호출 할 때 특정 값을 파라미터로 넣어주면 이 값을 작업이 끝나고 나서 사용 할 수 있다. 작업이 끝나고 나서 또 다른 작업을 해야 할 때에는 Promise 뒤에 .then(...) 을 붙여서 사용하면 된다.

 

실행 결과

 

이번에는 1초 뒤에 실패하게 해보면 다음과 같다.

const myPromise = new Promise((resolve, reject) => {
    setTimeout(() => {
      reject(new Error());
    }, 1000);
  });
  
myPromise.then(n => {
    console.log(n);
    }).catch(error => {
      console.log(error);
    });

 

실행 결과

실패하는 상황에서는 reject를 사용하고 .catch를 통하여 실패했을시 수행 할 작업을 설정 할 수 있다.

 

 

2) Promise를 사용해서 구현한 경우

function increaseAndPrint(n) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const value = n + 1;
      if (value === 5) {
        const error = new Error();
        error.name = 'ValueIsFiveError';
        reject(error);
        return;
      }
      console.log(value);
      resolve(value);
    }, 1000);
  });
}

increaseAndPrint(0)
  .then(n => {
    return increaseAndPrint(n);
  })
  .then(n => {
    return increaseAndPrint(n);
  })
  .then(n => {
    return increaseAndPrint(n);
  })
  .then(n => {
    return increaseAndPrint(n);
  })
  .then(n => {
    return increaseAndPrint(n);
  })
  .catch(e => {
    console.error(e);
  });

이것을 보다 더 정리하면 아래와 같이도 구현할 수 있다.

 

function increaseAndPrint(n) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const value = n + 1;
      if (value === 5) {
        const error = new Error();
        error.name = 'ValueIsFiveError';
        reject(error);
        return;
      }
      console.log(value);
      resolve(value);
    }, 1000);
  });
}

increaseAndPrint(0)
  .then(increaseAndPrint)
  .then(increaseAndPrint)
  .then(increaseAndPrint)
  .then(increaseAndPrint)
  .then(increaseAndPrint)
  .catch(e => {
    console.error(e);
  });

이렇게 Promise 를 사용하면 비동기 작업의 개수가 많아져도 코드의 깊이가 깊어지지 않게 된다.

 

 

실행 결과