javascript - 如何在反应项目中处理一个地方的axios错误？

Question

我是新手，我想知道您如何处理 axios 错误。我想要做的是在一个地方处理 axios 错误（axios.ts在我的情况下）。我想如果我可以设置错误状态axios.ts并使用该状态app.tsx来显示错误弹出窗口，那么我就不需要在每个单独的功能组件中处理 API 错误。但是因为你只能在函数组件中使用钩子，所以我不能useError在axios.ts.

我是否应该处理每个组件中的 API 错误，即使它可以被普遍处理？请帮助我，每一个建议都会有所帮助。

下面是axios.ts

import axios from 'axios';

axios.defaults.baseURL = `${process.env.SERVER_URL}`;

const testAPIs = (config) => {
    const pages = [urls....];
    return pages.includes(config.url);
};
const handleRequest = (config) => {
    const token = localStorage.getItem('token');
    if (token) {
        if (testAPIs(config)) {
            config.headers['Authorization'] = `Bearer ${token}`;
        }
    }
    return config;
};

axios.interceptors.request.use(handleRequest);

const handleResponse = (response) => {
    const {url, baseURL} = response.config;
    if (url === `${baseURL}/v1/auth`) {
        localStorage.setItem('token', response.data.token);
    }
    return response;
};

axios.interceptors.response.use(handleResponse, error => {
    const {response, config} = error;

    if (response.status === 401 && response.data.error === 'UNAUTHORIZED') {
        // I want to set error state using custom hooks here
        useError({name: 'UNAUTHORIZED', state: true});
    }

    return {response, config};
});

export default axios;

下面是useError.ts

import {useRecoilState} from 'recoil';
import {errorPopupState} from './errorPopupState';

const useError = ({name, state}: {name: string, state: boolean}) => {
    const [unauthorized, setUnauthorized] = useRecoilState(errorPopupState._unauthorized);

    if (name === 'UNAUTHORIZED') {
        setUnauthorized(state);
    } else if (name === 'some other error...) {
        ....
    }

};

export default useError;

标签： javascriptreactjsexceptionerror-handlingaxios