Java Script | Promise

목차

1. 프로미스가 뭔가요? 🌊
   - 자바스크립트 비동기 처리에 사용되는 객체로 콜백지옥의 문제를 해결하기 위해 도입되었다.
2. 프로미스 생성 방법
   - new Promise로 객체로 생성하여 비동기 처리를 수행하고 처리에 성공하면 resolve를, 실패시 reject를 호출한다.
3. 프로미스의 상태를 나타내는 것은 어떤 것들이 있나요? 🌊
   - Pending(대기) : 비동기 처리 로직이 아직 완료되지 않은 상태
   - Fulfilled(이행, 완료) : 비동기 처리가 완료되어 프로미스가 결과 값을 반환해준 상태
   - Rejected(실패) : 비동기 처리가 실패하거나 오류가 발생한 상태
4. 프로미스와 콜백 비교
   - callback은 callback 안에서만 비동기에 대한 처리가 가능하고, promise는 비동기에서 온 값이 Promise 객체에 저장되기 때문에 코드 작성에 용이함
5. 프로미스 빌트인 객체가 제공하는 정적 메서드에 대해 알고 있나요? 🌊
   1. Promise.resolve / Promise.reject
   2. Promise.all
   3. Promise.race
   4. Promise.allSettled

Promise

1. 프로미스가 뭔가요?

• 자바스크립트 비동기 처리에 사용되는 객체
• 서버에서 받아온 데이터를 화면에 표시할 때 주로 사용
• 비동기 로직의 결과가 다음 비동기로 전달해서 실행해야 할 때
  -> callback은 점점 깊어져서 가독성이 매우 안좋아지고, 코드를 작성할 때 힘듬(콜백지옥)
  -> Promise는 .then을 통해 코드의 깊이가 깊어지지 않고 이해하기 쉬움

callback vs Promise

//callback
function async(result, callback) {
  setTimeout(() => {
    callback(result, function (result) {
      console.log(result);
    });
  }, 1000);
}

async(0, function (res, callback) {
  callback(res);
  async(res + 1, function (res, callback) {
    callback(res);
    async(res + 1, function (res, callback) {
      callback(res);
    });
  });
});

// 0
// 1
// 2

//Promise
function async(result) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log(result);
      resolve(result); //데이터를 받으면 resolve 호출
    }, 1000);
  });
}

async(0)
  .then((res) => {
    return async(res + 1);
  })
  .then((res) => {
    return async(res + 1);
  });

// 0
// 1
// 2

2. 프로미스 생성 방법

const promise = new Promise((resolve, reject) => {
  if (/* 비동기 처리 성공 */) {
    resolve('result');
  } else { /* 비동기 처리 실패 */
    reject('failure reason');
  }
});

• Promise 생성자 함수는 비동기 처리를 수행할 콜백 함수를 인수로 전달받는데 이 콜백 함수는 resolve와 reject 함수를 인자로 전달받음
• Promise 생성자 함수가 인수로 전달받은 콜백 함수 내부에서 비동기 처리를 수행
• 이때 비동기 처리가 성공하면 resolve를, 실패하면 reject를 호출

사진출처 — https://ko.javascript.info/promise-basics

3. 프로미스의 상태를 나타내는 것은 어떤 것들이 있나요?

• Pending(대기) : 비동기 처리 로직이 아직 완료되지 않은 상태

  • new Promise() 메소드 호출하면 대기 상태(이때 콜백 함수 선언 / 콜백 함수의 인자는 resolve,reject)
    
    

• Fulfilled(이행, 완료) : 비동기 처리가 완료되어 프로미스가 결과 값을 반환해준 상태

  function getData() {
    return new Promise(function (resolve, reject) {
      var data = 100;
      resolve(data);
    });
  }
  
  // resolve()의 결과 값 data를 resolvedData로 받음
  getData().then(function (resolvedData) {
    console.log(resolvedData); // 100
  });
  

  
  

• Rejected(실패) : 비동기 처리가 실패하거나 오류가 발생한 상태

  function getData() {
    return new Promise(function (resolve, reject) {
      reject(new Error("Request is failed"));
    });
  }
  
  // reject()의 결과 값 Error를 err에 받음
  getData()
    .then()
    .catch(function (err) {
      console.log(err); // Error: Request is failed
    });
  

  
  

전체 진행 상황

function getData() {
  return new Promise(function (resolve, reject) {
    $.get("url 주소/products/1", function (response) {
      if (response) {
        resolve(response);
      }
      reject(new Error("Request is failed"));
    });
  });
}
// 위 $.get() 호출 결과에 따라 'response' 또는 'Error' 출력
getData()
  .then(function (data) {
    console.log(data); // response 값 출력
  })
  .catch(function (err) {
    console.error(err); // Error 출력
  });

4. 프로미스와 콜백 비교

1. callback
   • callback을 사용하면 비동기 로직의 결과값을 처리하기 위해서는 callback안에서만 처리를 해야하고, 콜백 밖에서는 비동기에서 온 값을 알 수가 없음
   • pattern은 자유도가 높지만 template이 존재하지 않기 때문에 코드가 복잡해지고 에러 처리가 어려움
2. Promise
   • 비동기에에서 온 값이 promise 객체에 저장되기 때문에 코드 작성이 용이해짐
   • Promise 클래스는 비동기 처리만을 위해 만들어졌기 때문에 클래스에 resolve나 reject 함수들이 잘 정의되어 있어 이를 활용하는 것을 추천함

5. 프로미스 빌트인 객체가 제공하는 정적 메서드에 대해 알고 있나요?

• Promise는 표준 빌트인 객체에 해당함(ECMAScript 사양에 정의된 객체 / 애플리케이션 전역의 공통기능을 제공)

  1. Promise.resolve / Promise.reject
     • 이미 존재하는 값을 래핑하여 프로미스를 생성하기 위해 사용
  2. Promise.all
     • 여러 개의 비동기 처리를 모두 병령처리할 때 사용
  3. Promise.race
     • Promise.all 메서드와 동일하게 프로미스를 요소로 갖는 배열 등의 이터러블을 인수로 전달
     • 가장 먼저 fulfilled 상태가 된 프로미스의 처리 결과를 resolve하는 새로운 프로미스를 반환
  4. Promise.allSettled
     • 프로미스를 요소로 갖는 배열 등의 이터러블을 인수로 전달
     • settled 상태(비동기 처리가 수행된 상태, fulfilled / rejected 상태)가 되면 처리 결과를 배열로 반환

---

* 230105 callback 분리 + Promise와 Callback 비교 추가

출처

callback & promise + 강의
Promise
callback & promise
callback & promise 전체
promise 생성
promsie
정적메소드
callback 과 Promise의 차이점