[Vue 기초] axios 환경 설정하기

안녕하세요.

vue-router에 이어서

vue 프로젝트를 진행할 때, 백엔드 서버와 data를 받고 보내기 위해 필요한 axios를 알아보겠습니다.

 

---

1. axios란?

axios는 promise기반의 http 비동기식 자바스크립트 통신기법입니다.

기존의 ajax는 jquery에 특화되어있고, promise기반이 아니라는 점이 단점인데

axios는 js의 플러그인으로 vue뿐만 아니라 react에서도 훌륭하게 쓸 수 있는 통신기법으로 자리잡았습니다.

또한, 비슷한 통신기법으로 fetch가 있지만 fetch에 비해 다양한 기능을 제공하고 있습니다.

물론 fetch는 별도의 설치가 필요없다는 점에서 아직 불안정한 라이브러리에서 종종 쓰이고 있습니다.

++)

ajax / axios / fetch에 대해 추가적으로 장단점 정리가 필요하다고 생각되네요^^..

 

2. axios 설치

npm install --save axios

 

3. axios 환경설정하기(인터셉터)

저는 여기서 axios의 구체적인 사용법을 다루기 보다는, axios 환경설정(인터셉터)하는 법에 대해 작성하도록 하겠습니다.

axios 사용법은 사실 ㅎㅎ 다른 블로그나 공식문서가 더 자세히 설명해줄 것이기 때문에 ^^...

 

1) 인터셉터를 이용하는 이유

• axios를 이용할 때, api url를 기본 baseUrl + 특정requestUrl로 나눌 수 있습니다. baseUrl은 계속 반복하여 사용하므로, 고정적인 요소로 설정하면 baseUrl에 대한 코드 반복 사용을 막을 수 있습니다.
• axios의 return 값으로 response 와 에러(catch-err) 발생을 공통적으로 처리하여 코드 반복 사용을 막을 수 있습니다.

2) 사용법

api폴더 생성 후 그 아래, axiosInstance.js 파일을 생성합니다.

import axios from "axios";

// axios 인스턴스를 생성합니다.
const axiosInstance = axios.create({
  baseURL: baseUrl,
  timeout: 1000 * 5, // 해당 timeout이 지나면 err가 발생합니다.
});

// request 인터셉터
axiosInstance.interceptors.request.use(
  (config) => {
    
    // 요청을 보내기 전에 수행해야 할 일
    
    return config;
  },
  (error) => {
    
    // 오류 요청을 보내기 전에 수행해야 할 일 

    return Promise.reject(error);
  }
);

// response 인터셉터
axiosInstance.interceptors.response.use(
  (response) => {
  		
        // http status가 200인 경우 응답 바로 직전에 대해 작성. 
    
    	return response;
  },
  (error) => {
  	// http status가 200인 아닌 경우 응답 바로 직전에 대해 작성.
    return Promise.reject(error)
  }
);

export default axiosInstance;

 

이렇게 작성한 axiosInstance 파일을 

import하여 

axios를 사용하면 통일되고, 심플한 코드를 작성하실 수 있습니다.

 

4. 심플하게 axios - api를 폴더구조로 정리하기.

각 컴포넌트마다 사용할 axios-api를 필요할 때마다 api를 적는 것은 코드를 복잡하게 만듭니다.

그래서 api에 대한 폴더를 만들고 그 폴더 아래, axios interceptor에 대한 파일과, api에 대한 파일들을 만들어 관리하는 것이 편합니다.

 

index.js 파일을 생성 후, 그 안에 api와 앞에서 설정해둔 axiosInstance.js을 임포트합니다.

// index.js
import request from "./axiosInstance.js";

export function getData() {
    return request({
        url: request_URL,
        method: 'get',
        // params: {}
    })
}

 

위와 같이 url, method, params(혹은 data) 를 설정하는 방식으로 

필요한 api를 정리해 놓고 

컴포넌트에 각 함수(ex - getData)를 임포트하여 axios를 이용합니다.

 

<script>
import { getData } from "@/api/index.js";

export default {
  
  ...
  
  methods: {
    async getDataByAxios() {
      const res = await getData();
      console.log(res);
    }
  }
};
</script>

---

감사합니다.