React 路由加载器中的错误状态处理全攻略

2024-03-26 04:37:40

React 路由加载器中的错误状态处理指南

在 React 路由中，加载器组件负责在路由渲染之前获取数据。如果加载器函数抛出错误，则将显示 errorElement 属性指定的组件。但是，有时加载器错误不会触发错误组件，这可能是由于未正确处理错误状态。本文将指导你如何控制 React 路由加载器中的错误状态。

错误状态处理的常见问题

在 React 路由中，最常见的错误状态处理问题是：

错误状态没有正确抛出
错误响应状态代码没有正确处理

解决错误状态处理问题的步骤

1. 正确抛出错误状态

加载器函数应在发生错误时抛出错误。在抛出错误之前，检查错误响应的状态代码非常重要。例如，如果状态代码为 401（未授权），则应抛出一个自定义错误，其中包含清晰的消息，如 "需要登录"。

2. 处理错误响应状态代码

fetcher 函数应正确处理服务器响应中的错误。如果响应状态不为 200（成功），则应抛出一个错误。错误消息应包含服务器返回的错误消息。

示例代码

export const DashbaordLoader = async () => {
  try {
    const data = await fetcher("http://localhost:3000/users", "GET");
    return data;
  } catch (err) {
    if (err.response && err.response.status === 401) {
      throw new Error("需要登录");
    } else {
      throw err;
    }
  }
};

export const fetcher = async (url: string, method: string) => {
  try {
    const response = await fetch(url, {
      method,
      headers: {
        "Content-Type": "application/json",
        Authorization: "",
      },
    });

    // 检查响应状态
    if (response.ok) {
      return response.json();
    } else {
      throw new Error(response.statusText);
    }
  } catch (err) {
    throw err;
  }
};