느린 개발자

Nuxt2로 프로젝트를 진행하면서 백엔드 서버와의 통신할 때 제가

Axios Interceptors 설정과 처리하는 방식을 한번 작성해보려고 합니다.

---

 

Axios Interceptors 란?

request와 response가 then 또는 catch로 처리되기 전에 가로챌 수 있게 해주는 axios 라이브러리입니다.

정리하면 Http Request , Response가 then catch 처리되기 전에 부가적인 처리 작업을 할 수 있습니다.

 

 

Request Interceptors?

• config 옵션 설정
• headers 설정
• jwt 인증이나 관련 부분 처리 -> 헤더에 담아서 보낼 때 
• 로딩 관련
• 로그 작업

Response Interceptors?

• 에러 핸들링 -> statusCode 별로 에러 처리나, 에러 페이지로 이동 설정
• 서버에서 받은 데이터 처리 -> 보통 데이터 그대로 return 하는 편
• 로딩 관련
• 로그 작업

---

환경구성

이름	버전
Nuxt	2.15.8
@nuxtjs/axios	5.13.6
axios	0.27.2
cookie-universal-nuxt	2.2.2

 

cookie-universal-nuxt 모듈은 쿠키 관련 설정할 때 나름 편해서 사용하고 있습니다.

cookie-universal-nuxt

 

---

Nuxt Plugins 폴더에 axios.client 파일 생성

 

plugins

• 코드에서 헤더 설정과, $cookies 사용, 재요청, 에러페이지 이동 등 참고하시면 됩니다.

import axios from 'axios'
export default function ({app,$cookies})
{
    axios.interceptors.request.use((config)=>{
    
    // 헤더 설정
    config.headers['Content-Type'] = 'application/json';
    
    // 토큰 가져오기 $cookies 사용 -> nuxt.config에서 설정방법 참고
    let token ={
        accessToken:  $cookies.get('accessToken'),
        refreshToken : $cookies.get('refreshToken')
    }
    // headers 명은 서버가 정해줌
    config.headers['AUTH-TOKEN'] = `${token.accessToken}`;
    return config
    },
    (error)=>{
    	// 요청시 에러날때 에러 리턴
        // 에러관련 처리가 필요하면 여기다 작성
        return Promise.reject(error)
    })

    axios.interceptors.response.use((response)=>{
    	// 서버에서 받은 데이터 리턴
        return response
    },
    async (error)=>{
    	// 리스폰 에러날때 관련 처리
        const { config, response: { status,data }, } = error;
        // 예시:  404일때 재요청
        if(status === 404){
        	return axios(config)
        }
        // 예시: 403일때 에러페이지로(layout/error) 이동
        else if(status === 403)
        {
       		$nuxt.error({statusCode:403})
        }
        // 에러 리턴
         return Promise.reject(error)
    })
}

 

 

모듈 설정 (nuxt.config.js)

// nuxt.config.js

...

  modules: [
    '@nuxtjs/axios',
    [
      'cookie-universal-nuxt',
      {
        alias: 'cookies',
        SameSite: 'Strict'
      }
    ]
  ],

 

 

Axios 사용

• 제가 사용하는 방식은 service/index.js 에서 get, post, put, delete 관련 메소드 설정을 하고
• service/api/test.js 파일에서 사용합니다. 물론 사람마다 스타일이 다르기 때문에 참고용으로 봐주시면 됩니다.
• axios interceptors 설정한 부분에 콘솔로 요청 전 요청 후 확인하시면 됩니다.

// service/index.js 로 구성

import axios from "axios";

export const getData = (path,params)=>{
    return new Promise((resolve,reject)=>{
        axios.get(`/test${path}`,{params})
            .then((data)=>{
                if(data.status === 200){
                    resolve(data)
                }
            })
            .catch((error)=>{
                console.log(error)
                reject(error)
            })
    })
}

// multipart용 post
export const postImage = (path,params)=>{
    return new Promise((resolve,reject)=>{
        axios.post(`/api${path}`,params,{
            headers: {
                'Content-Type' : 'multipart/form-data'
            }
        })
            .then((data)=>{
                if(data.status === 200){
                    resolve(data)
                }
            })
            .catch((error)=>{
                reject(error)
            })
    })
}

 

//service/api/test.js
import {getData,postImage} from '@/service'

// Get
export function SelectTest(params)
{
    return new Promise( (resolve,reject)=>{
        getData(`/test/${params}`)
            .then((data)=>{
                resolve(data)
            })
            .catch((error)=>{
                reject(error)
            })
    })
}

// image insert
export function InsertImage(params){
    return new Promise((resolve, reject) =>{
        postImage(`/image`,params)
            .then((data)=>{
                resolve(data)
            })
            .catch((error)=>{
                reject(error)
            })
    })
}

 

 

Typescript Axios Type 정리

• 사용할 Axios 관련 타입을 정의하여 사용합니다.
• axios typescript 설정은 추후에 다른 포스팅으로 설명하겠습니다.

import {
  AxiosInstance,
  AxiosInterceptorManager,
  AxiosRequestConfig,
  AxiosResponse
} from 'axios'

type CustomAxiosResponse<T = any> = {
  response?: T
  refreshToken?: string
}

export interface CustomAxiosInterface extends AxiosInstance {
  interceptors: {
    request: AxiosInterceptorManager<AxiosRequestConfig>
    response: AxiosInterceptorManager<AxiosResponse<CustomAxiosResponse>>
  }

  get<T>(url: string, config?: AxiosRequestConfig): Promise<T>
  delete<T>(url: string, config?: AxiosRequestConfig): Promise<T>
  post<T>(url: string, data?: any, config?: AxiosRequestConfig): Promise<T>
  put<T>(url: string, data?: any, config?: AxiosRequestConfig): Promise<T>
  patch<T>(url: string, data?: any, config?: AxiosRequestConfig): Promise<T>
}

 

 

---

Nuxt2 환경에서 Axios interceptors 관련 설정과 사용법에 대해서 설명해 보았습니다.

제가 사용하는 방식을 정리한 것이기 때문에 참고용으로 봐주시면 감사하겠습니다.

그리고 위에서도 작성했지만

Typescript로 작업은 추후에 정리 한번 해서 포스팅해보도록 하겠습니다.

 

 

 [TypeScript] Axios TypeScript 적용하여 사용해보자

느린 개발자