Axios에 대해 알아보자.

Axios 라이브러리

Axios는 공식문서에서는 ‘Promise based HTTP client for the browser and node.js‘라고 소개합니다.

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

React에서 OpenAPI를 이용한 통신을 할 때 Axios를 주로 사용합니다.

설치

Axios CDN

  
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

  npm install axios

기본 구조

요청 메서드로 요청을 보내면 Promise 객체에 데이터를 담아 반환해줍니다.

응답 데이터는 JSON형태로 반환되며, reponse.data로 꺼내서 사용할 수 있습니다.

간단 예제 (GET 방식)

  
const axios = require("axios");

// ID로 사용자 요청
axios
  .get("/user?id=1")
  // 응답(성공)
  .then(function (response) {
    console.log(response);
  })
  // 응답(실패)
  .catch(function (error) {
    console.log(error);
  });

요청 메서드

axios(config)
- config
  - url: 요청을 보낼 서버 URL
  - method: HTTP 요청 방식 지정
  - baseURL: url의 앞에 붙는 주소
  - timeout: 요청 취소되는 제한시간 지정 (timeout보다 오래걸리면 중단됩니다.)
  - headers: 사용자 지정 헤더
  - responseType: 응답 데이터 타입 지정 (arraybuffer, documetn, json, text, stream, blob)
  - params : 함께 전송되는 URL 파라미터 (주로 GET방식에서 사용합니다.)
  - data: 요청 body로 함께 전송될 데이터 (주로 POST방식에서 사용합니다.)
  - withCredentials: cross-site access-control 요청 허용 유무
    참고 글 : AXIOS-HTTP
1 2 3 4 5 6 7 8 9 // axios로 POST 요청 보내기 axios({ method: "post", url: "/user/1", data: { id: 1, name: "Psmin", }, });

별칭 메서드

더 간편하게 사용할 수 있도록 제공되는 메서드입니다.

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.request(config)
axios.head(url[, config])
axios.options(url[, config])

  
// axios() 사용 시
axios({
  url: "/user/2",
  method: "put",
  data: {
    id: 1,
    name: "Psmin",
  },
});

// axios.put() 별칭 메서드 사용 시
axios.put("/user/2", {
  id: 1,
  name: "Psmin",
});

axios.create()

사용자 정의 구성(위의 config 요소)을 사용하는 axios 인스턴스를 생성할 수 있습니다.

생성한 인스턴스에 별칭 메서드를 사용할 수 있습니다.

  
const instance = axios.create({
  baseURL: "https://some-domain.com/api/",
  timeout: 1000,
  headers: { "X-Custom-Header": "foobar" },
});

await / async 사용하기

async / await 문을 이용해 가독성 좋게 코드를 쓸 수 있습니다.

대부분 try / catch 문과 같이 사용합니다.

  
async function getUser() {
  try {
    const response = await axios.get("/user?id=1");
    console.log(response);
    console.log(response.data);
  } catch (error) {
    console.error(error);
  }
}

응답 데이터

응답 스키마

  
  {
    // 서버가 제공하는 응답 데이터
    data: {},

    // HTTP 상태 코드
    status: 200,

    // HTTP 상태 메시지
    statusText: 'OK',

    // HTTP 헤더
    // 모든 헤더 이름은 소문자이며, 괄호 표기법을 사용하여 접근할 수 있습니다.
    // 예: `response.headers['content-type']`
    headers: {},

    // 요청을 위해 `Axios`가 제공하는 구성
    config: {},

    // 이번 응답으로 생성된 요청
    // 이것은 node.js에서 마지막 ClientRequest 인스턴스 입니다.
    // 브라우저에서는 XMLHttpRequest입니다.
    request: {}
  }

then 사용 시 받는 응답

  
axios.get("/user/1").then(function (response) {
  console.log(response.data);
  console.log(response.status);
  console.log(response.statusText);
  console.log(response.headers);
  console.log(response.config);
});

Axios와 Fetch 차이점

Axios의 장점
- IE까지 브라우저를 보다 폭 넓게 지원
- JSON 데이터를 자동 변환 (Fetch의 본문 추출 메서드 .json() 자동화)
- 요청을 중간에 취소하거나, 응답시간을 제한 등 여러 기능을 제공
- 400, 500번대의 Error 발생 시 reject로 반환
  (Fetch에서는 response.ok가 false인 resolve를 반환하기 때문에 따로 예외 처리가 필요)
Fetch의 장점
- 내장 라이브러리이기 때문에 업데이트에 의한 에러를 방지
  (Axios는 사용을 위해 따로 설치 필요)

따라서, 자신의 개발 상황(지원하는 브라우저, 기타 다른 패키지 등등)에 맞는 라이브러리를 선택할 필요가 있습니다.

Axios의 추가 기능이 필요한 경우에는 axios를 기능이 필요하지 않고 별도의 패키지 설치를 원하지 않는 경우에는 fetch</u>를 사용합니다.
(상대적으로 fetch가 좀 더 가볍게 사용할 수 있습니다.)

즉, React Native처럼 업데이트가 잦은 라이브러리를 사용할 경우, Javascript 내장 라이브러리인 fetch를 사용하는 것이 편합니다.

Interceptor

Axios는 HTTP 요청과 응답을 가로채는 Interceptor 기능을 지원합니다.

Axios 인스턴스는 요청과 응답 각각의 Interceptor 관리자를 갖고 있습니다.

Interceptor 관리자는 요청과 응답을 가로챌 때 실행할 핸들러를 관리합니다.

즉, Interceptor 관리자에 실행할 핸들러를 등록하면 Axios 인스턴스가 요청을 보내기 직전과 응답을 받은 직후에 미리 등록한 핸들러를 실행합니다.

요청과 응답에 반복되는 로직을 등록해두거나, 요청 직전 헤더를 추가하는 등으로 활용 가능합니다.

Request Interceptor
1 axios.interceptor.request.use(onFulfilled, onRejected);
요청을 보내기 직전 onFulfilled 핸들러를 실행하며 에러 발생 시 onRejected 핸들러가 실행됩니다.
onRejected 핸들러가 실행되면 요청을 보내지 않고 즉시 종료됩니다.
Response Interceptor
1 axios.interceptor.response.use(onFulfilled, onRejected);
응답을 받응 직후 성공적으로 응답이 돌아온다면 onFulfilled 핸들러가 실행됩니다.
onRejected 핸들러는 요청이 실패하여 돌아온다면 실행됩니다.

Eject Interceptor

등록된 Interceptor를 제거 할 수도 있습니다.

  
const myInterceptor = axios.interceptors.request.use(function () {
  /*...*/
});
axios.interceptors.request.eject(myInterceptor);

간단 예제

  
  import Axios from 'axios'

  const axios = Axios.create(
    baseURL: 'https://some-domain.com/api',
    timeout: 1000,
    headers: {'X-Custom-Header': 'foobar'}
    )

  // 요청 인터셉터 추가
  axios.interceptors.request.use(
    function (config) {
      // 요청을 보내기 전에 수행할 일
      // ...
      return config;
    },
    function (error) {
      // 오류 요청을 보내기전 수행할 일
      // ...
      return Promise.reject(error);
    });

  // 응답 인터셉터 추가
  axios.interceptors.response.use(
    function (response) {
      // 응답 데이터를 가공
      // ...
      return response;
    },
    function (error) {
      // 오류 응답을 처리
      // ...
      return Promise.reject(error);
    });

비동기 통신 방식 - Axios