axios에 대하여

axios는 Promise 기반의 HTTP 비동기 통신 라이브러리이다.

 

아래와 같이 HTTP 메서드 전부를 지원한다.

• axios.get(url, [ , config])
• axios.delete(url [ , config])
• axios.post(url [ , data[ , config]])
• axios.put(url [ , data[ , config]])
• axios.patch(url [ , data[ , config]])

 

axios 사용법

GET 요청 수행하기

const axios = require('axios');

// 지정된 ID를 가진 유저에 대한 요청
axios.get('/user?ID=12345')
  .then(function (response) {
    // 성공 핸들링
    console.log(response);
  })
  .catch(function (error) {
    // 에러 핸들링
    console.log(error);
  })
  .finally(function () {
    // 항상 실행되는 영역
  });

// 선택적으로 위의 요청은 다음과 같이 수행될 수 있습니다.
axios.get('/user', {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  })
  .finally(function () {
    // 항상 실행되는 영역
  });  

// async/await 사용을 원한다면, 함수 외부에 `async` 키워드를 추가하세요.
async function getUser() {
  try {
    const response = await axios.get('/user?ID=12345');
    console.log(response);
  } catch (error) {
    console.error(error);
  }
}

POST 요청 생성

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

여러 동시 POST 요청 생성

function getUserAccount() {
  return axios.get('/user/12345');
}

function getUserPermissions() {
  return axios.get('/user/12345/permissions');
}

Promise.all([getUserAccount(), getUserPermissions()])
  .then(function (results) {
    const acct = results[0];
    const perm = results[1];
  });

 

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

 

 

 

 

 

 

axois의 장점

커스텀인스턴스 가능

아래 코드처럼 쉽게 기본 인스턴스를 커스텀하게 설정 가능하다.

axios.create({
	baseURL: host
})

 

baseURL, headers, params,

네트워크 상태에 따라 연결을 종료하는 timeout,

인증서버에 쓰이는 auth,

보안에 쓰이는 xsrf 토큰까지 쉽게 설정 가능합니다.

 

설정 방법은 BaseURL을 설정하듯이 JSON으로 설정하면 된다.

Config 기본값

모든 요청에 적용될 config 기본값을 지정할 수 있습니다.

전역 Axios 기본값

axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

커스텀 인스턴스 기본값

// 인스턴스를 생성할때 config 기본값 설정하기
const instance = axios.create({
  baseURL: 'https://api.example.com'
});

// 인스턴스를 만든 후 기본값 변경하기
instance.defaults.headers.common['Authorization'] = AUTH_TOKEN;

 

 

 

요청을 취소하는 cancelToken

예를 들어 어떠한 요청을 했는데 그 요청을 취소해야 하는 로직이있다.

사용자가  취소버튼을 눌렀거나 화면의 블러  부분을 클릭했을 때입니다,

그럴 때 axios의 cancelToke을 활용하면 된다.

const CancelToken = axios.CancelToken;
const source = CancelToken.source();

axios.get('/user/12345', {
  cancelToken: source.token
}).catch(function (thrown) {
  if (axios.isCancel(thrown)) {
    console.log('Request canceled', thrown.message);
  } else {
    // 에러 핸들링
  }
});

axios.post('/user/12345', {
  name: 'new name'
}, {
  cancelToken: source.token
})

// 요청 취소하기 (메시지 파라미터는 옵션입니다)
source.cancel('Operation canceled by the user.');

Axios의 취소 토큰 API는 중단된 proposal-cancelable-promises을 기반으로 하고 있습니다.

 

인터셉터

인터셉터를 설정해서 response를 받기 전 공통된 로직을 마치 미들웨어처럼 넣을 수 있다.

예를 들어 아래와 같은  인터셉터를 설정해놓지 않으면 

우리는 매번 요청을 할 때마다 에러핸들링 함수를 정의해주어야 합니다.

axios는 기본적으로 200 ~ 300 의 statusCode는 정상, 그 외에는 비정상으로 설정해놓기 때문에

이를 이용해서 쉽게 statusCode에 따른 에러 핸들링을 할 수 있게 된다.

또한 아래와 같이 request 인터셉터도 가능하다.

// 요청 인터셉터 추가하기
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);
  });

 

쉬운 참조

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);
  });