[Axios][업무][베트남🇻🇳] - Axios instance 생성하고 api 요청 함수 작성하는 방법

안녕하세요. 

회사에서 베트남 시니어 개발자 코드를 통해 학습한 내용을 일부 기록한 글입니다.

axios를 잘 정리해서 사용한 것 같아서 따라서 사용하고 있습니다. 이 코드를 보고 개발하는 프로젝트는 전부 이렇게 작성해서 사용하고 있습니다.

 

이 코드의 좋은 점은 다음과 같습니다.

-  axios 인스턴스를 만들 때 구성 기본 값 설정을 쉽게 해 줄 수 있습니다.

- 인터셉트 사용 설정.

 

 

구성이 좋았다고 생각한게, core라는 디렉토리에 axios 인스턴스를 생성하는 자바스크립트 파일 1개를 만들었다는 것입니다.

📁 src
|
+- 📁 api
   |
   +- 📁 core 
     +- 📄 index.js // 👈 axios 인스턴스를 만들고, 인스턴스를 내보냅니다.
   +- 📄 main.js    // 👈 axios 인스턴스를 import해서, api를 호출하는 함수를 모아 놓은 파일입니다.
 +- ...
 +- 📄 app.vue
 +- 📄 main.js

 

그럼, 코드를 살펴보겠습니다.

📁 /src/api/core/index.js

axios 인스턴스를 만들고, 인스턴스가 인터셉트 처리를 하도록 합니다.

import axios from 'axios';

// create an axios instance
const request = axios.create({             // 👈 axios 인스턴스 생성
    baseURL: process.env.VUE_APP_BASE_API
});

// 👇 요청 타임아웃 설정
request.defaults.timeout = 2500;

// 👇 요청 인터셉터 추가
request.interceptors.request.use(         
  config => {
    // 요청을 보내기 전에 수행할 로직
    return config
  },
  error => {
    // 요청 에러가 발생했을 때 수행할 로직
    console.log(error);  // 디버깅
    return Promise.reject(error);
  }
);

// 👇 응답 인터셉터 추가
request.interceptors.response.use(
  response => {
    //응답에 대한 로직 작성
    const res = response.data
    return res
  },
  error => {
    // 응답 에러가 발생했을 때 수행할 로직
    console.log(error); // 디버깅
    return Promise.reject(error);
  }
);

export default request;  // 👈 axios 인스턴스를 내보냅니다.

axios.interceptors?

then 이나 catch로 처리되기 전에 요청이나 응답을 가로챌 수 있습니다.

 

📁 /src/api/repository/main.js

core의 index.js를 import 합니다. export default 로 내보냈기 때문에, 반드시 request로 받아오지 않아도 됩니다.

get 요청이 default여서 파라미터 객체 안에 명시해주지 않아도 되지만, put, post는 요청을 명시해야합니다.

import request from '@/api/core';

//⚡️ get 요청
const getUserInfo= (aUserId) => {
  return request({url: `/getUserInfo/${aUserId}`})
} 

//⚡️ post 요청
const saveUserInfo = () => {
  request({
    method: 'post',
    url: '/user/12345',
    data: {
      firstName: 'Fred',
      lastName: 'Flintstone'
    }
  });
}

export default {
  getUserInfo,
  saveUserInfo
}

 

 

 

 

 

 

참고

인터셉터 | Axios 러닝 가이드