[javascript] 자바스크립트 Promise 사용 방법

참고: https://www.geeksforgeeks.org/javascript-promises/

Promise 는 javascript에서 비동기 작업을 처리하는 데 사용됩니다. 기존 코드만으로는 콜백의 콜백을 만들어 점점 관리가 어려워지는 콜백 지옥을 해결하고 다수의 비동기 작업을 처리할 때 관리하기 쉽도록 만들어줍니다.

Promise 이전에는 이벤트와 콜백 함수가 사용되었지만 기능이 제한적이고 다루기 힘들었습니다. 여러번 중첩된 콜백함수를 계속 사용하는 것은 점점 프로젝트를 관리하기 힘들게 하고 사용자가 동시에 여러개의 콜백을 처리하는 것도 쉬운일은 아닙니다. 이벤트 역시 비동기 작업 처리에 적합하지는 않습니다.

Promise는 간편하게 비동기 작업을 처리하기 위한 이상적인 선택입니다. 이는 여러 비동기 작업을 쉽게 처리하게 해주며 콜백 및 이벤트보다 더 나은 오류처리 방법을 제공합니다. 다시 말하면 Promise는 동시에 여러 콜백을 처리하여 원하지 않는 콜백 지옥을 피하기 위한 이상적인 선택이라고 할 수 있습니다. 특히 특정 코드가 여러 비동기 작업을 구현하는 데 사용되는 경우 사용자가 코드를 보다 효과적이고 효율적으로 읽을 수 있게 해줍니다.

Promise의 이점

1. 코드 가독성 향상
2. 비동기 작업 처리 개선
3. 비동기 로직에서 더 나은 제어 흐름 정의
4. 더 나은 오류 처리

Promise의 4가지 상태

1. fulfilled: Promise가 성공했을 때
2. rejected: Promise가 실패했을 때
3. pending: 아직 보류중일 때(아직 fulfilled나 rejected가 나기 전)
4. settled: fulfilled나 rejected 상태가 나온 후

생성자로 Promise 객체 생성

const promise = new Promise(function (resolve, reject) {
  // do something
});

• 매개변수
  1. Promise 생성자는 콜백함수 하나의 매개변수를 받습니다. (이 콜백에 익명함수도 참조할 수 있음)
  2. 콜백 함수는 resolve와 reject 두개의 매개변수를 받습니다.
  3. 콜백 함수의 기능을 수행하고 결과가 성공이면 resolve를 호출합니다.
  4. 원했던 기능이 잘 작동하지 않았다면 reject를 호출합니다.

반응형

예제

const promise = new Promise(function (resolve, reject) {
  const x = "geeksforgeeks";
  const y = "geeksforgeeks";

  if (x === y) {
    resolve();
  } else {
    reject();
  }
});

promise
  .then(function () {
    console.log('Success, You are a GEEK');
  })
  .catch(function () {
    console.log('Some error has occurred');
  });

Promise의 결과는 .then과 .catch 메소드로 받을 수 있습니다.

then()

then()은 resolved나 reject 상태일 때 호출될 수 있습니다. 또한 Promise에서 데이터를 가져와 성공적으로 실행하도록 정의할 수도 있습니다. then()은 매개변수로 두개의 함수를 받습니다. 첫 번째 함수는 Promise가 resolved 상태이고 결과를 받았을 때 실행될 함수이고 두 번째는 rejected 상태이거나 에러가 발생했을 때 실행될 함수입니다. 두 번째 매개변수는 뒤에 설명할 .catch() 라는 더 좋은 방법이 있기 때문에 생략가능합니다.

//success
var promise = new Promise(function (resolve, reject) {
  resolve('Geeks For Geeks');
});

promise
  .then(function (successMessage) {
    // success handler function is invoked
    console.log(successMessage);
  }, function (errorMessage) {
    console.log(errorMessage);
  });

// error
var promise = new Promise(function (resolve, reject) {
  reject('Promise Rejected');
});

promise
  .then(function (successMessage) {
    console.log(successMessage);
  }, function (errorMessage) {
    // error handler function is invoked
    console.log(errorMessage);
  });

catch()

catch()는 rejected 상태이거나 어떤 에러가 발생했을 때 실행됩니다. 주로 에러 핸들링 용도로 사용됩니다. 매개변수로는 에러가 발생했을 때 실행할 한개의 함수를 받습니다.

// rejected
var promise = new Promise(function (resolve, reject) {
  reject('Promise Rejected');
});

promise
  .then(function (successMessage) {
    console.log(successMessage);
  })
  .catch(function (errorMessage) {
    //error handler function is invoked
    console.log(errorMessage);
  });

// error
var promise = new Promise(function (resolve, reject) {
  throw new Error('Some error has occurred');
});

promise
  .then(function (successMessage) {
    console.log(successMessage);
  })
  .catch(function (errorMessage) {
    //error handler function is invoked
    console.log(errorMessage);
  });

정리

Promise는 이벤트의 비동기 처리가 필요할 때 사용되고, 비동기 http 요청을 처리할 때도 사용할 수 있습니다.