[JavaScript] Promise와 Fetch API, Axios 이해하기

Promise

프로미스(Promise)는 비동기 처리를 위한 패턴으로 ES6에서 도입되었다. 프로미스의 등장으로 전통적인 콜백 패턴의 단점을 보완할 수 있게 되었다. Promise 생성자 함수를 new 연산자와 함께 호출하면 프로미스 객체를 생성하게 된다.

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

프로미스는 비동기 처리 결과(resolve, reject)와 진행 상태(pending, fulfilled, rejected) 정보를 갖는다.

비동기 처리가 아직 수행되지 않은 상태를 pending(대기)이라 하고, 비동기 처리가 성공할 경우 resolve 함수를 호출하고 프로미스를 fulfilled(이행) 상태로 변경한다. 만약 비동기 처리가 실패하거나 오류가 발생하면 reject 함수를 호출하고 프로미스를 rejected(실패) 상태로 변경한다. 이렇게 fulfilled나 rejected 둘 중 하나로 비동기 처리가 수행된 상태를 settled라 하고, 일단 settled가 되면 다른 상태로 변화할 수는 없다.

 

프로미스의 .then, .catch, .finally 후속 처리 메서드로 비동기 처리 상태에 따라 선택적으로 콜백을 호출할 수 있다. then은 프로미스가 이행되었을 때, catch는 실패했을 때(then의 두 번째 인자로도 처리할 수 있지만 가급적 catch를 사용), finally는 성공이든 실패든 settled된 후에 항상 콜백이 실행된다. 후속 처리 메서드를 사용하면 언제나 프로미스를 반환하므로 연속적으로 호출 가능하다. 이를 프로미스 체이닝(promise chaining)이라 한다.

 

서버에 네트워크 요청을 보내고 받아오기 위해 사용하는 프로미스 기반의 fetch API와 axios는 항상 프로미스 객체를 반환한다.

Fetch API

fetch API는 ES6부터 지원된 Web API로, 브라우저 내장 함수이기 때문에 별도의 라이브러리를 추가하지 않고 간단하게 사용할 수 있다. 하지만 브라우저 호환성이 상대적으로 떨어지고, .json 메서드를 사용해 JSON 형식으로 변환해주어야 하며, axios에 비하면 확장성이 부족하다는 단점이 있다.

let promise = fetch(url, [options]);
// url – 접근하고자 하는 URL
// options – 선택 매개변수, method나 header 등

promise
  .then((response) => console.log(response))
  .catch((error) => console.log(error));

Axios

Axios는 브라우저와 노드 환경에서 사용할 수 있는 프로미스 기반 HTTP 클라이언트 라이브러리다.

// 설치
npm i axios
yarn add axios

axios를 쓰는 방법으로는 config 방법과 요청 메서드 방법이 있다.

const callSomethingAxios = () => {
  // 1. config 방법
  axios({
    method: 'get',
    url: 'http://localhost:5001/api',
  }).then((response) => {
    console.log(response);
  });

  // 2. 요청 메서드 방법
  axios
    .get('http://localhost:5001/api')
    .then((res) => console.log(res)) // 성공 핸들링
    .catch((err) => console.log(err)); // 에러 핸들링
};

async/await을 사용하면 try...catch 방식을 이용해서 에러 처리를 해주면 된다.

const callSomethingAxios = async() => {
  try {
    const response = await axios.get('http://localhost:5001/api');
    console.log(response);
  } catch (error) {
    console.error(error);
  }
};

 

Reference >

• 모던 자바스크립트 Deep Dive p.842-852
• https://ko.javascript.info/fetch
• https://axios-http.com/kr/docs/example
• 스파르타코딩클럽 리액트 심화반 강의