[React-Native] Axios interceptors

강빈·2021년 11월 26일
1

Mobile App

목록 보기
9/11

Axios 사용하면서, 중복되는 API url, header값들 계속 같이 보내주는 게 귀찬항서 axios interceptors를 사용했다.

baseUrl로 중복되는 url을 지정해줬다.
내가 가장 귀찮게 생각했던 부분은 토큰값이었다.
토큰값을 asyncStorage에 저장해놨었는데,
api 호출이 필요한 곳마다 import AsyncStorage를 해주고,
또 async await을 걸어서 실어보내야만 했다.

그래서, utils 폴더에 아래와 같이 한 파일에서 다 지정해주고, 해당 파일을 import해서 axios를 사용하면 다른 처리가 필요없도록 했다.

const axiosInstance = Axios.create({
    baseURL: 'https://api-dev.edisonoptimizer.com/kbs/v3/',
    timeout: 5000,
})

axiosInstance.interceptors.request.use(
    async (config: any) => {
        const token = await AsyncStorage.getItem('token')
        config.headers["Content-Type"] = "application/json; charset=utf-8"
        config.headers["Authorization"] = `Bearer ${token}`
        return config;
    },
    err => {
        return Promise.reject(err)
    }
)

axiosInstance.interceptors.response.use(
    config => {
        return config;
    },
    err => {
        return Promise.reject(err)
    }
)

export default axiosInstance;

0개의 댓글