[react] instance를 사용한 axios hook과 디렉토리 구조

본 게시물은 

https://pinokio0702.tistory.com/373

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

블로그를 바탕으로 작성했으며, 추후 다시 확인후 사용하기 위함임.

 

디렉토리 구조는 위와 같다. 

api 폴더를 만들어준 뒤 그 안에 axios instance를 생성 할 core->index.ts를 생성해주고

이를 바탕으로 request를 보내는 hooks들이 있는 main.ts를 생성해준다. 

 

 

import axios from 'axios'

//create an axios instance

const request = axios.create({
    baseURL:''
})
//요청 타임아웃 설정
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 인스턴스를 내보낸다.

core->index.ts에서는 위와 같이 예외처리와 로직을 작성해준다.

 

 

이후 main.ts에서 instance를 받아와 request를 보내는 hooks를 작성해주면 된다.

import request from "./core";

//get요청

export const getUserInfo = (userID:any) =>{
    return request({url:`gerUserInfo/${userID}`});
}




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