axios를 알아갈 수록 아직도 모르는게 너무 많다🥲
최근 headers에 같은 값을 넘겨주어야하는 상황이 생겼는데
매번 적어주기엔 너무 귀찮더라,,, (나 벌써 개발자 마인드인건가🧐)
graphql에서는 컴포넌트로 뺐던 기억이 나서 axios도 분명이 있겠구나 싶어서 공부해봤다!
const sendEmail = async () => {
try {
const response = await axios.post(SENDNAVEREMAIL, {
email,
},{
headers:{
"Content-Type": "application/json",
Authorization: `Bearer ${accessToken}`,
},
});
alert(`${email}로 메일이 전송 되었습니다`);
console.log(response);
} catch (error) {
console.log(error);
}
};
headers에 accessToken의 값을 받아와서 Authorization부분에 넣어주어야하는데
post 요청을 보내는 함수 마다 headers에 accessToken의 값을 받아와서 Authorization에 넣어주어야한다면 너무나 비효율적인 코드가 될것이다 그래서 axios를 분리하여 사용할 수 있는 것이
axios.create
이다
import axios from "axios";
const baseURL = process.env.REACT_APP_DB_HOST;
const authInstance = () => {
const token = "accessToken";
const instance = axios.create({
baseURL,
headers: {
"Content-Type": "application/json",
Authorization: `bearer ${token}`,
},
...options,
});
return instance;
};
export const instance = authInstance
이렇게 만들어주면 요청할때마다 accssToken값을 넣어주지 않아도
instance 컴포넌트를 불러와서 사용하면 토큰값을 넘겨줄 수 있다
baseUrl도 적어주기 때문에 post 요청시 주소를 적어주는 부분에는 baseUrl을 제외한 뒷부분만 적어주면 된다
const sendEmail = async () => {
try {
const response = await instance.post(SENDNAVEREMAIL, {
email,
});
alert(`${email}로 메일이 전송 되었습니다`);
console.log(response);
} catch (error) {
console.log(error);
}
};
간단하고 여러번 사용이 가능한 코드가 되었다!