WIL: Axios

Axios 인스턴스, 인터셉터란?

인스턴스 만들기

사용자 지정 config로 새로운 Axios 인스턴스를 만들수 있다.

axios.create([config])

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

인스턴스 메소드

다음은 사용 가능한 인스턴스 메소드입니다. 지정된 config가 인스턴스 config와 결합됩니다.

axios#request(config)

axios#get(url[, config])

axios#delete(url[, config])

axios#head(url[, config])

axios#options(url[, config])

axios#post(url[, data[, config]])

axios#put(url[, data[, config]])

axios#patch(url[, data[, config]])

axios#getUri([config])

 

인터셉터

then 또는 catch로 처리되기 전에 요청과 응답을 가로챌수 있다.

// 요청 인터셉터 추가하기
axios.interceptors.request.use(function (config) {
    // 요청이 전달되기 전에 작업 수행
    return config;
  }, function (error) {
    // 요청 오류가 있는 작업 수행
    return Promise.reject(error);
  });

// 응답 인터셉터 추가하기
axios.interceptors.response.use(function (response) {
    // 2xx 범위에 있는 상태 코드는 이 함수를 트리거 합니다.
    // 응답 데이터가 있는 작업 수행
    return response;
  }, function (error) {
    // 2xx 외의 범위에 있는 상태 코드는 이 함수를 트리거 합니다.
    // 응답 오류가 있는 작업 수행
    return Promise.reject(error);
  });

나중에 필요할때 인터셉터를 제거할 수 있다.

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

커스텀 인스턴스에서도 인터셉터를 추가할 수 있다.

const instance = axios.create();
instance.interceptors.request.use(function () {/*...*/});

 

더 알아보기

Fetch API vs Axios

Fetch API 는 Web API이기 때문에 지원되는 브라우저에서는 별도의 설치과정 없이 바로 사용이 가능하다.

Fetch API를 지원하는 브라우저는 아래와 같으며 IE를 제외한 대부분 모던 브라우저에서 지원하고 있다.

출처 :  https://caniuse.com

 

fetch의 기본적인 사용법

// GET 방식
fetch(URL, OPTIONS?)
.then(response => response.json())
.then(data => console.log(data))

// POST방식
fetch(URL, {
 method: "POST",
 OPTIONS?
})
.then(response => response.json())
.then(data => console.log(data))

fetch는 메소드 형태로 사용하며 첫번째 인자에는 요청 할 대상의 URL, 두번째 인자에는 요청에 대한 옵션을 객체형태로 넣을 수 있다.

fetch는 method를 생략하면 GET요청으로 간주되기 때문에 만약 POST방식으로 요청을 보내고자 할 경우 {method: "POST"} 옵션을 꼭 명시해주어야 한다. 

 

두번째 인자에 들어가는 요청에 대한 옵션 중 자주 사용되는 옵션들은 아래와 같다.

key	value
method	GET, POST와 같은 HTTP method를 명시하는 옵션입니다. 명시하지 않을 경우 GET으로 처리됩니다.
headers	요청 헤더에 포함될 내용이 들어가는곳입니다. 보통 보내는 데이터의 컨텐츠 타입을 명시하기 위해 Content-Type을 요청 헤더에 추가할 때 사용됩니다.
body	POST메소드와 같이 데이터를 보내는 요청을 할 때 데이터를 이 body의 값으로 넣으면 됩니다. (String, FormData, Blob-파일, ArrayBuffer등의 형태로 전송할 수 있습니다.)
mode	CORS와 관련된 설정입니다. (Ex. cors, no-cors, same-origin 등)
credentials	요청에 쿠키를 포함하고 싶거나 사용자에 대한 인증이 필요할 때 사용하는 옵션입니다. fetch는 기본적으로 credentials에 별도의 설정을 하지 않으면 쿠키를 포함할 수 없습니다.

위의 예제는  jsonplaceholder 를 이용해서 GET 방식으로 데이터를 요청해 본 코드입니다.

요청 후 응답이 왔을 때는 위 사진처럼 promise객체 형태로 반환되는 최초 응답 값을 볼 수 있고 이 객체 내부에는 요청과 응답에 관련된 속성들이 포함되어있다. Fetch API의 응답에서는 데이터에 바로 접근할 수 없고 json메소드를 통해 promise객체 내부에 있는 데이터를 변환하는 과정이 필요하다.

응답 객체 내부의 status와 ok의 속성 값을 통해 응답이 정상적으로 도착했는지 판단할 수 있으며 ok는 boolean타입으로 200번대의 HTTP 상태코드이면 true, 그 외에는 false값을 가진다.
status의 값은 HTTP 상태코드를 뜻하며 200번대라면 응답 데이터가 도착한것.

위 사진의 경우 json메소드를 통해 응답 데이터를 json으로 변환된 결과를 보여주고 있으며 변환이 완료된 위의 상태부터 응답 데이터를 사용할 수 있다. POST방식에서는 fetch메소드의 두번째 인자인 options내부에 객체형태로 보내고자 하는 데이터를
body에 넣어주고 요청헤더에 Content-type을 명시해서 보내야 합니다. 또한 꼭 HTTP 메소드를 POST로 지정해주어야 한다.

POST방식으로 요청을 보낼 경우 HTTP의 상태 코드는 201로 오는 경우가 많으며 201은 요청이 정상적으로 전달되었으며 요청시에 보낸 데이터로 자원이 생성되었다는 뜻을 가지고 있다.

 

Axios

Axios는 Fetch API와는 다르게 라이브러리이기 때문에 별도의 설치과정이 필요하다.

그래서 라이브러리를 설치해야하는 불편함이 따르지만 Fetch API보다 지원이되는 브라우저의 폭이 넓고 더 다양한 기능을 가지고 있다.

Fetch API의 경우 Web API로서 브라우저에서만 사용이 가능하지만 axios는 서버사이드 환경도 지원하기 때문에 브라우저와 노드환경 모두 사용이 가능하다. 브라우저에서 동작할 때는 XHR객체를 사용하고 서버사이드 환경에는 http api를 사용한다.

사용법

메소드 형식과 객체 형식 두가지 문법으로 사용이 가능하다.

// 메소드 형식
axios.get('https://jsonplaceholder.typicode.com/todos/1')
.then(res => console.log(res));

// 객체 형식
axios({
 method: 'get',
 url: 'https://jsonplaceholder.typicode.com/todos/1',
})
.then(res => console.log(res))

Axios의 응답은 아래와 같으며 요청과 관련된 정보(요청 설정값, 요청헤더), 응답 데이터, status등이 포함되어있다.

Fetch와는 다르게 응답을 받으면서 데이터를 json으로 변환시켜주는 과정이 포함되어있어서 별도의 변환과정없이 응답후 객체 내부의 data속성을 통해 응답 데이터에 바로 접근 가능.

Axios는 get 뿐 아니라 post, put, delete, patch 등 HTTP method 종류에 따라 사용가능하도록 다양한 메소드를 지원하고 config를 통해 요청에 관련된 설정 할 수 있다.

 

Axios

장점

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

단점

• 모듈 설치를 해줘야한다.

fetch

장점

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

단점

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