[JavaScript] 기다리지 않고 다음 코드를 실행하는 비동기 처리와 비동기 작업의 결과를 나타내기 위한 약속, Promise

𐂂 비동기 처리

특정 로직의 실행이 끝날 때까지 기다려주지 않고
다음 코드를 먼저 실행하는 자바스크립트의 특성을 '비동기 처리'라 한다.

📜 비동기처리.js

  console.log('Hello');
  setTimeout(function() {
      console.log('Bye');
  }, 3000);
  console.log('Hello Again');

  // Hello
  // Hello Again
  // Bye

---

🤡 요청을 하고, 데이터를 받아올 때까지 기다려주는 코드가 없으면,
데이터를 받아오기도 전에 다음 코드가 실행되어 원하는 값을 얻을 수 없다.

📜 JS 비동기처리 문제점.js

  function getData() {
      let tableData;
      $.get('[url주소]', function(response) {
          tableData = response;
      });
      return tableData;
  }

  console.log(getData()); //undefined

---

🗝️ 콜백함수(callback)로 비동기 처리방식의 문제점을 해결할 수 있다.
: 콜백함수를 사용하면 특정 로직이 끝났을 때, 원하는 동작을 실행시킬 수 있다.

📕 참고 자료 📕

📜 콜백함수 사용.js

  function getData(callback) {
      $.get('[url주소]', function(response) {
          callback(response);
      });
  }

  getData(function(tableData) {
      console.log(tableData);
  });

---

🤡 콜백함수를 연속해서 사용할 때 (콜백 안에 콜백을 무는 형식) 🧩 가독성이 떨어진다.

📜 가독성 떨어지는 코드.js

  $.get('url', function(response) {
      parseValue(response, function(id) {
          auth(id, function(result) {
              display(result, function(text) {
                  console.log(text);
              });
          });
      });
  });

𐁍 Promise

자바스크립트 비동기 처리에 사용되는 객체다.
비동기 작업의 결과를 나타내기 위한 약속(promise)을 나타낸다.

⚠️ 연속된 콜백함수 사용으로 인해 낮아지는 가독성 문제를 해결할 수 있다.

📜 promise객체 사용.js

  function getData() {
      return new Promise(function(resolve, reject) {
          $.get('[url주소]', function(response) {
  `            resolve();
          });
      });
  }

  //getData()의 실행이 끝나면 호출되는 then()
  getData().then(function(tableData){
      console.log(tableData);
  });

𖠃 Promise 상태 (Promise 처리과정)

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

Fulfilled(이행상태)
: 비동기 처리가 완료되어 Promise가 결과값을 반환해준 상태
⚠️ 콜백함수의 인자 resolve()를 호출하면 Fulfilled(이행상태)가 된다.
⚠️ Fullfilled(이행상태)가 되면 then()을 이용하여 처리 결과값을 받을 수 있다.

Rejected(실패상태)
: 비동기 처리가 실패하거나 오류가 발생한 상태
⚠️ 콜백함수의 인자 reject()를 호출하면 Rejected(실패상태)가 된다.
⚠️ Rejected(실패상태)가 되면 err를 catch()로 받을 수 있다.

📜 resolve_reject 호출.js

  function getData() {
      return new Promise(function(resolve, reject) {
          $.get('[url주소]', function(response) {
              if(response) {
                  resolve(response);
              }
              reject(new Error("Request is failed"));
          });
      });
  }

  getData().then(function(data) {
          console.log(data);
  }).catch(function(err) {
          console.log(err);
  });

---

🗝️ 여러개의 Promise를 연결하여 사용할 수 있다.
(then() 메서드를 호출하고 나면 새로운 Promise 객체가 반환되어 가능)

  new Promise(function(resolve, reject) {
      setTimeout(function() {
          resolve(1);
      }, 2000);
  })
  .then(function(result) {
      console.log(result); //1
      return result + 10;
  })
  .then(function(result) {
      console.log(result); //11
      return result + 20;
  })
  .then(function(result) {
      console.log(result); //31
  });

𖠃 Promise 에러처리 2가지 방법

(1) then() 메서드의 두번째 인자
(2) catch() (권고)

WHY

  function getData() {
      return new Promise(function(resolve, reject) {
          resolve('hi');
      });
  }

  getData().then(function(result) { //handle Success
      console.log(result);
      throw new Error("Error in then()"); //여기서 오류가 나는 경우
  }, function(err) { // handle Error, 오류를 잡아내지 못한다.
      console.log("then error: ", err);
  });