Axios를 이용한 통신 - ts 버전

연계 컨텐츠

1. Axios를 이용한 통신 :  https://dev-leon.tistory.com/82

2. Axios를 이용한 통신 모듈 구조화 : https://dev-leon.tistory.com/83

 

Axios란

프런트엔드에서 Promise 방식으로 HTTP 통신을 수행하는 라이브러리입니다.

프런트엔드에서 가장 많이 사용하는 라이브러리입니다.

 

설치방법

  npm 방식
    npm install axios

  yarn 방식
     yarn add axios

 

사용 방법

  api.ts 파일에 Axois 객체 생성하고 intercepters까지 적용

import axios, { Axios } from 'axios';

const api: Axios = axios.create({
  baseURL: 'your-backend-url',

  // 기본적인 통신의 포멧은 json
  headers: {
    'Content-Type': 'application/json',
  },
});

api.interceptors.request.use(
    function (config) {
      // 요청을 보내기 전에 AccessToken을 헤더에 추가    
      const token = 'my-token';
      config.headers.Authorization = `Bearer ${token}`;
      return config;
    },
    function (error) {
      // 요청 에러 처리
      // api 객체를 사용하는 곳에서는 exception 구문으로 호출됨
      return Promise.reject(error);
    }
  );

  // 응답 인터셉터 추가
  api.interceptors.response.use(
    function (response) {
      // 2xx 범위에 있는 상태 코드는 이 함수를 트리거합니다.
      // 응답 데이터 반환
      return response;
    },
    function (error) {
      // 2xx 외의 범위에 있는 상태 코드는 이 함수를 트리거합니다.
      // api 객체를 사용하는 곳에서는 exception 구문으로 호출됨
      return Promise.reject(error);
    }
  );

export default api;

 

.vue 파일에서 Axios 객체 사용

import api from './api';

function test(){
    api.get(this.url)
    .then((res) => {
        console.log((res.data)
    })
    .catch((err) => {
        console.log(err);
    })
}