Promise

• Promise는 JavaScript에서 비동기 작업을 다루는 기본적인 개념이다. Promise가 등장한 이유가 콜백지옥(Callback Hell) 문제를 해결하기 위해서 등장한 개념이다.

• Jquery의 ajax의 경우 성공과 실패를 처리하기 위해 콜백함수(success, error)을 사용한다. 요청이 연속적이게 되면 코드가 늘어나면서 가독성이 떨어지고 각 단계마다 에러 처리를 반복하는 문제가 발생한다. (물론 JQuery 1.5버전 부터는 내부적으로 Promise와 비슷한 메서드를 사용할 수 있다.)

• 백엔드 API 요청같은 작업은 시간이 걸리기때문에 비동기적으로 처리해야한다. “기다리는 동안 코드가 멈추지 않게” 비동기적으로 처리를 해야한다. Promise는 이런 비동기 작업의 결과를 나중에 받아서 처리할 수있게 해준다.

• Promise의 상태

  • Pending(대기): 아직 결과가 나오지 않은 상태
  • Fulfilled(이행): 작업이 성공해서 결과값을 반환한 상태
  • Rejected(거부): 작업이 실패해서 에러를 반환한 상태

  const myPromise = new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("성공!"); // 2초 후 성공
      // reject("실패!"); // 실패 시
    }, 2000);
  });
  
  myPromise
    .then((result) => console.log(result)) // 성공 시 실행
    .catch((error) => console.log(error)); // 실패 시 실행
  

  • then: 성공했을 때 실행할 코드
  • catch: 실패했을 때 실행할 코드

  axios나 fetch는 내부적으로 Promise 기반으로 동작한다. 그래서 API 요청 후 데이터를 받을 때 .then()을 사용한다.

• Promise의 콜백지옥 이외에 추가적인 이점

  • 에러 처리: 콜백방식은 각 단계마다 에러를 따로 처리해야 했지만, Promise는 .catch()로 한 번에 잡을 수 있다.
  • 병렬 처리: Promise.all() 같은 기능을 통해 여러 비동기 작업을 동시에 실행하고 결과를 모을 수도 있다.
  • 표준화: JavaScript에서 비동기 작업을 다루는 표준적인 방법으로 자리 잡았다.

async/await

• async/await은 Promise를 더 깔끔하게 쓰기 위한 문법이다. .then()과 .catch()를 반복적으로 쓰는 대신, 마치 동기 코드처럼 보이게 작성할 수있다. ****

fetch와 함께 사용하게 되었을 경우

async function getData() {
  try {
    const response = await fetch("<https://api.example.com/data>");
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.log(error);
  }
}

getData();

• async: 이 함수가 비동기 작업을 포함한다는 뜻
• await: Promise가 완료될 때까지 기다린 후 결과를 반환
• try/catch: 에러처리를 깔끔하게 함

axios와 함께 사용하게 되었을 경우

import axios from "axios";

async function getData() {
  try {
    const response = await axios.get("<https://api.example.com/data>");
    console.log(response.data); // axios는 자동으로 JSON 변환
  } catch (error) {
    console.log(error);
  }
}

getData();

Fetch