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;