import Axios from 'axios';
import { API_HOST } from "./Constants";
import { makeUseAxios } from 'axios-hooks';
export const API_HOST = process.env.REACT_APP_API_HOST_BACKEND || 'http://localhost:8000';
export const axiosInstance = Axios.create({
baseURL: API_HOST
});
export const useAxios = makeUseAxios({
axios: axiosInstance
});
axiosInstance를 사용하면 local 환경과 production 환경이 자동으로 구분되는 장점이 있다. 환경변수의 설정값의 유무에 따라 API_HOST값이 바뀌기 때문이다. 실제 컴포넌트에서 사용하는 예시는 다음과 같다.
const response = await axiosInstance.get(`/board/announcements/?page=${page}`);
async function sendPostRequest() {
try {
const response = await axiosInstance.post('/board/announcements/',
{ title, content },
{ headers: header }
);
console.log('응답:', response.data);
} catch (error) {
console.error('에러 발생:', error);
}
}
sendPostRequest();
const response = await axiosInstance.patch('/profiles/',
formData,
{
headers: {
'Authorization': `Bearer ${djangoAccessToken}`,
'Content-Type': 'multipart/form-data',
}
},
)
const response = await axiosInstance.put(`announcements/${id}`);
const response = await axiosInstance.delete(`announcements/${id}`);