TIL 54 | Axios

간단한 토이프로젝트를 진행하면서 사용해보았던, Axios에 대해 정리하고자 쓴 글입니다.

Axios

• Axios란 브라우저, Node.js를 위한 HTTP 비동기 통신 라이브러리이다.

• Promise 기반이며 async, await 사용이 가능하다.

• JS 비동기통신 내장라이브러리인 fetch와 다르게, 설치를 통해 사용이 가능하다.

• 구버전의 브라우저와 호환이 되며 데이터를 JSON 형태로 자동 변환할 수 있다.

설치 방법

• node.js 환경에서는 npm install axios or yarn add axios를 통해 설치가 가능하다. 브라우저의 환경에서 사용할 경우 공식문서에서 제공하는 script src를 통해 설치할 수 있다.

기본 요청 방식

일반적인 요청 방식은 다음과 같다.

import axios from 'axios'
//
axios({
    method: 'get',
    url:'/user', // 이 외 나머지 config 항목들은 optional이다.
}).then(res => console.(res))

• url 외에는 모두 optional하므로 공식문서를 참고하여 추가로 config 영역에 지정해주면 된다. (method의 경우 default값이 get이므로 optional이라고 보는 듯하다. 또한 자주 사용하게 될 쿼리 관련 params, post 시 사용할 data, 토큰 관련 headers에 대해 좀 더 알고 있으면 좋을 듯하다.)

간결 요청 방식

axios.get(url[, config])            // GET
axios.post(url[, data[, config]])   // POST
axios.put(url[, data[, config]])    // PUT
axios.patch(url[, data[, config]])  // PATCH
axios.delete(url[, config])         // DELETE

• 기본 요청 방식처럼 axios 내부에 모든 인자를 지정해주는 것이 아닌 요청 메서드와 동일한 name으로 제공되는 메소드를 사용할 경우 url, method, data를 따로 지정할 필요가 없어진다.

인스턴스 생성

    const getData = axios.create({
        baseURL: 'url',
        headers: {Authorization: 'token'},
        ...
    })
//
    getData1.get('url2',{       // 추가 path url
        params: {               // 쿼리 작성
            a: 10,
            b: 20,
        },
    });
    // 실제로 요청하는 API 주소: `url/url2?a=10&b=20`
    //
    getData2.get('url3',{       // 추가 path url
        params: {               // 쿼리 작성
            c: 30,
            d: 40,
        },
    })
    // 실제로 요청하는 API 주소: 'url/url3?c=30&d=40'

• create()메서드를 통해 인스턴스를 생성하게 되면, 사용자가 정의한 인스턴스를 기준으로 추가 path 및 query를 지정할 수 있다.

응답 스키마 형식

응답 스키마, 즉 통신에 대한 응답 데이터는 아래와 같은 형태로 오게 된다.

{
  config: {},
  data: {},
  headers: {},
  request: {}
  status: 200,
  statusText: 'OK',
}

• config: request에 대해 설정된 config 내부 구조이다.
• data: 서버에서 받아오는 데이터이다.
• headers: 서버에서 받아오는 데이터이다.
• status: 통신 상태를 나타내는 status code이다.
• statusText: HTTP 상태 메시지이다.
• headers: 서버가 응답한 헤더의 정보

실제로 적용해본 코드

import axios from "axios";
//
class Youtube {
  constructor(key) {
    this.youtube = axios.create({
      baseURL: "https://www.googleapis.com/youtube/v3",
      params: { key: key },
    });
  }
  //
  async mostPopular() {
    const response = await this.youtube.get("videos", {
      params: {
        part: "snippet",
        chart: "mostPopular",
        maxResults: 25,
      },
    });
    return response.data.items;
  }
}
export default Youtube;

• 유튜브 API를 사용하여 동영상 정보를 가져오는, 간단한 토이프로젝트에 적용했다.

• axios.create를 통해 기본 인스턴스를 지정한 후, path 및 query parameter를 통해 원하는 데이터를 얻어올 수 있었다.

• 또한 로직을 컴포넌트 내부에 직접 선언하는 것이 아닌, 외부로 빼내어 모듈화를 시켜주며 재사용성을 좀더 높일 수 있었다.

Reference

• Axios 공식문서

• Axios 러닝가이드