AXIOS란? && Fetch와의 차이점

Axios에 대해서

프로젝트를 하면서 axios를 주로 사용했었는데 axios를 사용하는 이유와 fetch와의 차이점을 구분짓기 위해 작성했습니다.

Axios란?

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

• axios와 fetch의 차이점

아래의 표는 Geeks for Geeks글을 참조하였습니다.

요청 객체에 url이 있다.(axios)	요청 객체에 url이 없다.(fetch)
써드파티 라이브러리로 설치가 필요	현대 브라우저에 빌트인이라 설치 필요 없음
XSRF 보호를 해준다.	별도 보호 없음
data 속성을 사용	body 속성을 사용
data는 object를 포함한다	body는 문자열화 되어있다
status가 200이고 statusText가 ‘OK’이면 성공이다	응답객체가 ok 속성을 포함하면 성공이다
자동으로 JSON데이터 형식으로 변환된다	.json()메서드를 사용해야 한다.
요청을 취소할 수 있고 타임아웃을 걸 수 있다.	해당 기능 존재 하지않음
HTTP 요청을 가로챌수 있음	기본적으로 제공하지 않음
download진행에 대해 기본적인 지원을 함	지원하지 않음
좀더 많은 브라우저에 지원됨	Chrome 42+, Firefox 39+, Edge 14+, and Safari 10.1+이상에 지원

위와 같은 표를 보았을 때 axios는 별도의 설치가 필요하다는 단점이 있지만 그것을 커버할 만한 fetch 보다 많은 기능 지원과 문법이 간소화 된다는 장점이 있다는 것을 볼 수 있습니다..

그렇다면 간단하게 사용할때는 fetch를 쓰고, 이외의 확장성을 염두해봤을 땐 axios를 쓰면 좋을 것 같다

Install

Axios를 사용하기 위해서는 설치를 진행해야 한다.

npm install axios

axios 기본 사용법

axios를 사용해 GET 요청하는 방법은 다음과 같습니다.

GET 요청

GET은 서버에서 어떤 데이터를 가져와서 보여주기 위해
URL주소에 있는 쿼리스트링을 활용해서 정보를 전달합니다.

const axios = require('axios')

// GET ID로 사용자 요청
axios.get('/user?ID=12345')
  // 응답(성공)
  .then(function(response) {
    console.log(response)
  })
  // 응답(실패)
  .catch(function(error) {
    console.log(error)
  })
  // 응답(항상 실행)
  .then(function() {
    // ...
  })

// 또 다른 방식으로는 params 옵션을 이용해서 받을 수 있습니다.
axios.get('/user', {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  })
  .then(function () {
    // ...
  });

위의 코드는 기본 사용법이며 최근에는 아래와 같이 async함수를 같이 사용해서 좀 더 보기 좋게 쓰기도 한다.

Async 함수

async / await를 사용할 경우 함수 또는 메서드 앞에 async 키워드를 사용하고

내부에 async 키워드를 사용해 비동기 통신 요청을 처리합니다.

async / await는 오류 디버깅을 위해 try/catch 구문을 사용합니다.

async function getUser() {
  try {
    const response = await axios.get('/user?ID=12345')
    console.log(response)
  } catch (error) {
    console.error(error)
  }
}

인스턴스를 하나 생성해서 axios 기본 세팅을 할 수도 있습니다.

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

POST 요청

POST 요청도 GET 요청과 거의 같습니다.

POST 메서드의 두 번째 인자는
본문으로 보낼 데이터를 설정한 객체 리터럴을 전달합니다.

axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

멀티 요청

여러 개의 요청을 동시 수행할 경우 axios.all() 메서드를 사용합니다.

axios.all([getUserAccount(), getUserPermissions()]) // <-- 이쪽
  .then(axios.spread(function (acct, perms) {
    // Both requests are now complete
  }));

API

구성(configuration) 설정을 axios()에 전달하여 요청할 수 있습니다.

위에 있던 예제에서는 axios.get 또는 axios.post 이런식으로

작성을 해서 통신을 했다하면 아래의 예시들처럼 내부에 method 방식을 지정해서

전송을 한다는 뜻이었습니다.

POST 방식

// POST 요청 전송
axios({
  method: 'post',
  url: '/user/12345',
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
});

GET 방식

// 원격 이미지 GET 요청
axios({
  method:'get',
  url:'url링크',
  responseType:'stream'
})
  .then(function (response) {
    response.data.pipe(fs.createWriteStream('photophoto.jpg'))
  });

confing option과 응답 스키마

응답 스키마는 데이터를 받아올 때 확인해야 함.
다음과 같은 6 종류가 있다.

{
  // `data`는 서버가 제공한 응답(데이터)입니다.
  data: {},

  // `status`는 서버 응답의 HTTP 상태 코드입니다.
  status: 200,

  // `statusText`는 서버 응답으로 부터의 HTTP 상태 메시지입니다.
  statusText: 'OK',

  // `headers` 서버가 응답 한 헤더는 모든 헤더 이름이 소문자로 제공됩니다.
  headers: {},

  // `config`는 요청에 대해 `axios`에 설정된 구성(config)입니다.
  config: {},

  // `request`는 응답을 생성한 요청입니다.
  // 브라우저: XMLHttpRequest 인스턴스
  // Node.js: ClientRequest 인스턴스(리디렉션)
  request: {}
}

then을 사용하면 다음과 같이 응답을 받을 수 있다.

axios.get('/user/12345').then(function(response) {
  console.log(response.data)
  console.log(response.status)
  console.log(response.statusText)
  console.log(response.headers)
  console.log(response.config)
})

HTTP 메서드 별칭

편의를 위해 지원되는 모든 요청 메소드에 별칭이 제공된다.

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])

별칭 메소드를 사용하면 설정(config)에서 url, method 및 data 속성을 지정할 필요가 없습니다.

// axios.put() 별칭 메서드 사용 시
axios.put('/user/12345', {
  firstName: 'Fred',
  lastName: 'Flintstone'
})

axios와 fetch의 장,단점

axios 장점

response timeout 처리 방법이 있다. (fetch에는 존재하지 않는 기능)
promise 기반으로 다루기가 쉽다
크로스 브라우징에 신경을 많이썼기에 브라우저 호환성이 뛰어나다.

axios 단점
모듈 설치를 해줘야한다.

fetch 장점
내장 라이브러리이기에 별도의 import를 해줄 필요가 없다.
promise 기반으로 다루기가 쉽다.
내장 라이브러리이기에 사용하는 프레임워크가 안정적이지 않을 때 사용하기 좋다.

fetch 단점
internet explorer의 경우에는 fetch를 지원하지 않는 버전도 존재한다. (브라우저 호환성이 상대적으로 떨어진다.)
기능이 부족하다.