비동기 처리의 꽃, Axios 🌸

계절에 맞춰 적는 글

🚨 본 글은 Promise를 알고있다는 전제하에 작성한 글입니다. :)

1. 등장 배경

우리는 동적 웹 사이트를 만들기 위해 서버로 부터 데이터를 받아온다. Javascript에서 HTTP 통신을 위해 *XMLHttpRequest 객체를 사용하는 등의 방식이 일반적이었다. Json이나 XML형태로 필요한 데이터만 받아 갱신하기 때문에 그만큼의 자원과 시간을 아낄 수 있다는 장점이 있었지만, 반대로 사용자에게 아무런 진행정보를 주지 않기 때문에 사용자가 요청이 완료가 안되었는데 페이지를 떠날 수도 있다는 점과 복잡한 구조를 제공한다는 단점이 있다.

 

* XMLHttpRequest에 대해 더 알고 싶다면 아래 링크를 참고하길 바란다.

[JavaScript] Ajax 정리 - Azderica

 

그래서 이런 단점을 보완하기 위해 Axios가 나타나게 되었고, 요즘 가장 많이 사용하는 라이브러리이다. 아래는 https://npmtrends.com 에서 가져온 그래프다. 보면 알겠지만, xmlhttprequest는 물론 react보다 훨씬 더 많은 사용률을 나타내고 있다. 

2. Axios 개념

공식 문서 (https://axios-http.com/kr/docs/intro)에 따르면, axios의 정의는

브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리이다.

정의를 잘 읽다보면 Promise API를 활용한다는 부분이 보인다. 이 의미는 Promise의 구조를 활용해서 사용 할 수 있다는 뜻이다. 그래서 Axios는 Promise 기반으로 비동기적인 HTTP 요청을 처리하며, 다양한 HTTP 메소드(GET, POST, PUT, DELETE 등)를 지원하고, 요청에 대한 다양한 설정(헤더, 인터셉터 등)을 할 수 있다. 또한, Axios는 JSON 데이터를 자동으로 직렬화하고 역직렬화하여 사용할 수 있어, 데이터를 쉽게 처리할 수 있도록 도와준다.

 

3. Axios 사용하기

아까 정의에서도 말했는 axios를 Promise 구조를 활용해서 사용할 수 있다. 아래 리액트 예제를 살펴보자.

import axios from 'axios';

// axios.create를 사용하여 인증 관련 API의 baseURL을 설정
const authAxios = axios.create({
  baseURL: "https://요청할API URL을 넣어주세요",
});

// 회원가입 요청을 보내는 함수
export const signup = (email, password) => {
  return authAxios.post("/signup", { email, password });
};

// 로그인 요청을 보내는 함수(Promise 형태)
export const signin = (email, password) => {
  return new Promise((resolve, reject) => {
  
  // authAxios.post로 POST 요청을 보내고 응답을 받아오기
    authAxios.post("/signin", { email, password })
      .then(response => {
      // 성공 시 응답 데이터를 가공하여 반환
        resolve({
          token: response.data.access_token,
        });
      })
      .catch(error => {
       // 실패 시 에러를 처리
        reject(error);
      });
  });
};

이를 활용해서 async/await에서도 사용이 가능하다. 아래는 위에서 썼던 Promise 코드를 async/await으로 바꾼 코드이다.

import axios from 'axios';

// axios.create를 사용하여 인증 관련 API의 baseURL을 설정
const authAxios = axios.create({
  baseURL: "https://요청할API URL을 넣어주세요",
});

// 회원가입 요청을 보내는 함수
export const signup = (email, password) => {
  return authAxios.post("/signup", { email, password });
};

// 로그인 요청을 보내는 함수(async/await 활용)
export const signin = async (email, password) => {
  try {
   // authAxios.post로 POST 요청을 보내고 응답을 받아옵니다.
    const response = await authAxios.post("/signin", { email, password });
    
    // 성공 시 응답 데이터를 가공하여 반환
    return {
      token: response.data.access_token,
    };
  } catch (error) {
  // 실패 시 에러를 던짐
    throw error;
  }
};

이외에도 자신이 필요한대로 커스텀하여 간편하게 axios를 활용할 수 있다.