[React] axios 错误处理的标准化

介绍

这一次，我将写关于如何规范 axios 的错误处理，它是一个 HTTP Client 库。

什么是错误处理

什么是错误处理？当在程序处理过程中发生干扰处理的事件时，处理将作为错误处理。是。
在前端进行 API 通信时，如果响应是错误的，通常会进行一些处理。
*例如，返回 404 时跳转到 NotFound 页面
如果在所有进行API通信的地方都写下错误处理过程，描述量会增加，会很麻烦。

const fetchData = async () => {
  try {
    const response = await axios.get("http://localhost:3000/");

  } catch(err) {
    // エラー時の処理
  }
}

axios错误处理的通用化

利用 axios 的Interceptors。

在这里查看Interceptors：拦截器

通过使用Interceptors来规范axios的错误处理，不需要在所有进行API通信的点都进行错误处理，只需要为每个页面编写自己的错误处理即可！

axiosErrorHandler.js

axios.interceptors.response.use(
  (response) => response, // 成功時の処理 今回の例ではresponseを返すだけ
  (error) => {            // エラー時の処理
    switch (error.response?.status) {
      case 422:
　　　　　　　　　　　　　　　　　// ステータスコード別の処理

        // Promise reject オブジェクトを必ずリターンする
        return Promise.reject(error.response?.data);
      case 404:
        // ステータスコード別の処理

        return Promise.reject(error.response?.data);
      case 500:
　　　　　　　　　　　　　　　　　// ステータスコード別の処理

        return Promise.reject(error.response?.data);
      default:
　　　　　　　　　　　　　　　　　// デフォルトの処理

        return Promise.reject(error.response?.data);
    }
  }
);

*提示：Interceptors可以分享axios请求预处理

Tips：在 axios 错误处理中使用 React Hooks

我认为有时你想在常见的错误处理过程中使用 Hooks。
示例：使用useNavigate 转换到带有 404 的 NotFound 页面
React 钩子通常只能在组件内部的顶层调用。
参考：https://qiita.com/tatsumin0206/items/4e1076e2deedf20a9485
因此，在错误处理常用流程中使用它需要一点小聪明。
具体来说，创建一个用于错误处理的组件，并在组件中用useEffect描述常用处理

export const AxiosErrorHandleProvider = ({ children }) => {
    const navigate = useNavigate(); // Hooksが使用できる！！

    useEffect(() => {
      // axiosの共通エラーハンドリング記述
      apiClient.interceptors.response.use(
        (response) => response,
        (error) => {
          switch (error.response?.status) {
            case 404:
              navigate('/404'); // navigateを使用してリダイレクト
              return Promise.reject(error.response?.data);
          }
        }
      );
    }, []);

    return <>{children}</>;
  }
);

之后，将 App 组件封装在以下表单中。

ReactDOM.render(
  <React.StrictMode>
    <AxiosErrorHandleProvider> # 作成したコンポーネントでAppを囲う
      <App />
    </AxiosErrorHandleProvider>
  </React.StrictMode>,
  document.getElementById("root")
);

现在你可以在 axios 错误处理中使用 React Hooks 了！

如果您能稍微参考一下，我将不胜感激。

原创声明：本文系作者授权爱码网发表，未经许可，不得转载;

原文地址：https://www.likecs.com/show-308628015.html