[React] Axios로 리팩토링

1. Axios Interceptor

axios로 데이터를 요청할 때 서버의 주소를 담아 요청했다. 그러나 서버의 주소가 변경되면 모든 서버의 주소를
모두 변경해야하는 번거로움이 있다.

💡 .env 파일에 서버주소를 저장해 주소를 업데이트 해야 할 경우, .env 파일에서만 변경하면 된다.

.env

REACT_APP_SERVER_URL = http://localhost:4000

1.1 interceptor란?

interceptor은 '가로채는 사람'이라는 뜻으로 중간에
요청이나 응답을 가로채가는 기능이다.

👉요청이 처리되기 전(http request가 서버에 전달되기 전)과 응답의 성공 또는 실패가 처리되기 전 상태를 가로채간다.

• 인터셉터로 가로채서 원하는 작업들을 추가할 수 있다.
• 커스텀 인스턴스에서 인터셉터를 추가해 사용할 수 있다.

📁axios 👉 📜api.js

이제 따로 axios 폴더 안에서 axios instence를 생성해
interceptor 처리를 해보자.

<axios instance 생성하기>

import axios from 'axios';

const instance = axios.create({
    baseURL: process.env.REACT_APP_SERVER_URL,

})

export default instance;

• instance를 생성할 때 요청할 서버 주소를 넣고 그외에 사용자 지정 config 옵션을 추가할 수 있다.

이제 APP 컴포넌트에서 axios를 import하지 않아도
데이터를 요청할 수 있다.

import api from './axios/api';

export default function App() {

  	await api.get(`/todos`);
    await api.post('/todos', text);
    await api.patch(`/todos/${id}`, {
      todo: updateText
    });
    await api.delete(`/todos/${id}`); 

➡️ 서버를 요청할 때 baseURL을 제외한 주소만 적어도 된다.

이제 interceptor로 요청과 응답사이를 관여해보자.
즉, 요청과 응답 사이 로직을 넣는다.

instance.interceptors.request.use(
   //요청을 보내기 전 실행되는 함수
    function (config) {
        console.log('인터셉터 요청 성공!');
        return config;
    },
  //오류 요청을 보내기 전 실행되는 함수
    function (error) {
        return Promise.reject(error);
    },
)

instance.interceptors.response.use(
	//응답을 내보내기 전 수행되는 함수  
    function (response) {
        console.log('인터셉터 응답 받음!');
        return response;
    },
   //오류 응답을 내보내기 전 수행되는 함수
    function (error) {
        console.log('인터셉터 응답 오류 발생!');
        return Promise.reject(error);
    },
)

• 요청을 보내기 전/응답을 내보내기 전 실행되는 함수에 각각 config,response 인자를 받는다.
• 오류 요청/응답은 error 인자를 받으며 Promise.reject를 통해 에러 객체를 전달한다.

응답 오류를 받는 경우
ex) timeout을 짧게 설정한 경우
👉 axios instance에 timeout을 1ms로 설정한 경우
timeout 지정한 시간이 지나면 오류가 발생함.
(기본단위:ms)