Axios 인터셉터의 반응 후크

아시다시피 React 컴포넌트나 커스텀 훅 이외의 PLC에서는 React 훅을 사용할 수 없습니다.

이 기사에서는 Axios 인터셉터에서 후크를 사용하는 방법을 배웁니다.

먼저 React 프로젝트를 생성합니다.

yarn create react-app hooks-in-axios-interceptors

// or

npx create-react-app hooks-in-axios-interceptors

그런 다음 사용자 지정 구성으로 Axios 인스턴스를 만듭니다.

import axios from 'axios';

const instance = axios.create({
    baseURL: "https://example.com"
})

export default instance;

Hook을 사용하기 위해서는 React 컴포넌트가 필요하므로 여기에 컴포넌트를 작성해 보겠습니다.

import axios from 'axios';

let instance = axios.create({
    baseURL: "https://example.com"
}) 

function AxiosInterceptor({children}) {
    return children;
}

export default instance;
export {AxiosInterceptor}

구성 요소에 인터셉터를 추가하는 것은 부작용이므로 useEffect hook에서 도움을 얻습니다.
useEffect 의 Axios 인스턴스에 인터셉터를 추가합니다.

참고 : useEffect 를 실행할 때마다 Axios 인스턴스에 새로운 인터셉터를 추가하기 때문에 useEffect return 문에서 인터셉터를 제거해야 합니다.

import axios from 'axios';
import { useEffect } from 'react'

const instance = axios.create({
    baseURL:  "https://example.com"
})

const AxiosInterceptor = ({ children }) => {

    useEffect(() => {

        const resInterceptor = response => {
            return response;
        }

        const errInterceptor = error => {
            return Promise.reject(error);
        }


        const interceptor = instance.interceptors.response.use(resInterceptor, errInterceptor);

        return () => instance.interceptors.response.eject(interceptor);

    }, [])
    return children;
}


export default instance;
export { AxiosInterceptor }

이제 원하는 후크를 가져와서 인터셉터 핸들러에서 사용할 수 있습니다.
예를 들어 상태 코드 401과 함께 반환되는 요청을 로그인 페이지로 리디렉션하려면 useNavigate 후크( react-router-dom에서)를 사용하거나 useRouter 후크(다음에서)를 사용할 수 있습니다./라우터 ).

import axios from 'axios';
import { useEffect } from 'react'
import { useNavigate } from 'react-router-dom'

const instance = axios.create({
    baseURL:  "https://example.com"
})

const AxiosInterceptor = ({ children }) => {

    const navigate = useNavigate();

    useEffect(() => {

        const resInterceptor = response => {
            return response;
        }

        const errInterceptor = error => {

            if (error.response.status === 401) {
                navigate('/login');
            }

            return Promise.reject(error);
        }


        const interceptor = instance.interceptors.response.use(resInterceptor, errInterceptor);

        return () => instance.interceptors.response.eject(interceptor);

    }, [navigate])

    return children;
}


export default instance;
export { AxiosInterceptor }

참고: 애플리케이션의 SPA 동작을 파괴하지 않으려면 리디렉션에 window.location를 사용하지 않습니다.

마지막으로 Axios 인터셉터 구성 요소로 앱을 래핑합니다.

import { AxiosInterceptor } from './axios'
import ThemeProvider from './theme-context'
import AuthProvider from './auth-context'

function App() {
  return (
    <ThemeProvider>
      <AuthProvider>
        <AxiosInterceptor>
          <div>
            App
          </div>
        </AxiosInterceptor >
      </AuthProvider>
    </ThemeProvider>
  );
}

export default App;

참고: 다른 컨텍스트 데이터에 액세스하려면 Axios 인터셉터 구성 요소가 컨텍스트 공급자의 자식이어야 합니다.

결론

이러한 방식으로 Axios 인터셉터에서 React 후크를 쉽게 사용할 수 있습니다.