Library] Axios : 응용

2023.06.27 - [Front-End/Library] - Library] Axios

 

이전 Axios글을 기반으로 마지막 코멘트에 달았던 내용들을 다뤄보려고 합니다.

 

 

---

 

 

동시요청

axios
.all([axios.get(), axios.get(), req3...])
.then(axios.spread((res1, res2, res3, res4) => {
    // 요청 성공했을 때
  })
)

한 번에 여러 개의 데이터를 갖고 오고 싶을 때 사용하면 될 듯합니다.

 

 

---

 

 

Instance

const axiosInstance = () => {
  const instance = axios.create({
    baseURL: 'http://localhost:3000/account',
    withCredentials: true,
    xsrfCookieName: '쿠키이름',
    xsrfHeaderName: '헤더이름',
    ...
  });
  
  return instance;
};

axios통신을 위한 instance하나 만들어 미리 option을 설정해 주고 사용하면 편리합니다.

 

 

---

전역설정

axios.defaults.baseURL = 'http://localhost:3000/account';
axios.defaults.withCredentials = true;
axios.defaults.xsrfCookieName = '쿠키이름';
axios.defaults.xsrfHeaderName = '헤더이름';

instance 만들고 난 뒤, instance.defaults로 값을 정해주면 default 값을 바꿔 줄 수 있습니다.

 

 

---

 

 

이미지 다운로드

axios({
   url: imgurl,
   method: 'GET',
   responseType: 'blob'
})
.then((response) => {
   const url = URL.createObjectURL(new Blob([response.data])); // blob 데이터를 객체 url로 변환
   
   // 이미지 자동 다운 로직
   const aTag = document.createElement('a');
   aTag.setAttribute('href', url);
   aTag.setAttribute('download', 'sample.png');
   aTag.click();
   
   URL.revokeObjectURL(url);
 })

 

 

---

 

 

interceptors

request

axios.interceptors.request.use((config) => {
  // 요청이 전달되기 전에 작업 수행
  return config;
}, (error) => {
  // 요청 오류가 있는 작업 수행
  return Promise.reject(error);
});

 

response

axios.interceptors.response.use((response) => {
  // 요청이 전달되기 전에 작업 수행
  return response;
}, (error) => {
  // 요청 오류가 있는 작업 수행
  return Promise.reject(error);
});

 

Interceptor 제거

const interceptor = axios.interceptors.request.use(() => {});
axios.interceptors.request.eject(interceptor);

 

 

---

 

 

개발할 때, axios관련된 부분을 따로 정의해 두고 함수로 사용하면 좀 더 소스를 깔끔하게 작성할 수 있을 것 같습니다.
프로젝트 진행 할 때, 다른 사람이 작성해 놓은 거 가져다 쓰기만 했는데 정리할 겸 한번 보니 이해하는데 도움이 됐습니다.