前端umi-request中请求errorHandler

Question

ant design pro 请求的异常处理

request,ts

/**
 * request 网络请求工具
 * 更详细的 api 文档: https://github.com/umijs/umi-request
 */
import {extend} from 'umi-request';
import {message, notification} from "antd";

const codeMessage = {
  200: '服务器成功返回请求的数据。',
  201: '新建或修改数据成功。',
  202: '一个请求已经进入后台排队（异步任务）。',
  204: '删除数据成功。',
  400: '发出的请求有错误，服务器没有进行新建或修改数据的操作。',
  401: '用户没有权限（令牌、用户名、密码错误）。',
  403: '用户得到授权，但是访问是被禁止的。',
  404: '发出的请求针对的是不存在的记录，服务器没有进行操作。',
  406: '请求的格式不可得。',
  410: '请求的资源被永久删除，且不会再得到的。',
  422: '当创建一个对象时，发生一个验证错误。',
  500: '服务器发生错误，请检查服务器。',
  502: '网关错误。',
  503: '服务不可用，服务器暂时过载或维护。',
  504: '网关超时。',
};

/**
 * 异常处理程序
 */
const errorHandler = (error: { response: Response }): Response => {
  const {response} = error;
  if (response && response.status) {
    const errorText = codeMessage[response.status] || response.statusText;
    const {status, url} = response;
    console.log(status)
    // 处理参数问题
    let noParamUrl = url;
    if (url.indexOf('?') !== -1) {
      noParamUrl = url.substring(0, url.indexOf('?'));
    }
    if (status === 401) {
      notification.warn({
        message: '请重新登陆!',
      });
    } else {
      notification.error({
        message: `请求错误 [${status}]: ${noParamUrl}`,
        description: errorText,
      });
    }

  } else if (!response) {
    console.log(response)
    notification.error({
      description: '您的网络发生异常，无法连接服务器',
      message: '网络异常',
    });
  }
  return response;
};


/**
 * 配置request请求时的默认参数
 */
const request = extend({
  errorHandler,
  timeout: 10000
});

/**
 * 所以请求拦截器
 */
request.interceptors.request.use((url, options): any => {
  return {
  };
});

/**
 * 所有响应拦截器
 */
request.interceptors.response.use(async (response, options): Promise<any> => {
  const res = await response.clone().json()
  if (res.code== 0) {
    message.error(res.msg)
  }
    return res.data;
});

export default request;

返回404 状态 单数 异常处没有生效。这怎么解决？

Answer 1

【以下回答由 GPT 生成】

可以在errorHandler函数中添加自定义的逻辑来处理特定的错误状态码。例如，可以根据状态码显示不同的错误提示信息，或者进行特定的操作。

以下是一个示例代码，展示如何在errorHandler函数中处理特定的错误状态码：

/**
 * 异常处理程序
 */
const errorHandler = (error: { response: Response }): Response => {
  const {response} = error;
  if (response && response.status) {
    const errorText = codeMessage[response.status] || response.statusText;
    const {status, url} = response;
    console.log(status);
    // 处理参数问题
    let noParamUrl = url;
    if (url.indexOf('?') !== -1) {
      noParamUrl = url.substring(0, url.indexOf('?'));
    }
    if (status === 401) {
      // 如果是401错误，提示重新登录
      notification.warn({
        message: '请重新登陆!',
      });
    } else if (status === 404) {
      // 如果是404错误，显示自定义的错误提示信息
      notification.error({
        message: '页面不存在',
        description: '您访问的页面不存在，请检查URL是否正确。',
      });
    } else {
      // 其他错误状态码，显示默认的错误提示信息
      notification.error({
        message: `请求错误 [${status}]`,
        description: errorText,
      });
    }
  }

  // 返回原始的响应
  return response;
}

在上述代码中，我添加了一段逻辑来处理404错误状态码。当服务器返回404时，会显示自定义的错误提示信息。如果遇到其他错误状态码，将显示默认的错误提示信息。

你可以根据需要添加自定义的逻辑来处理其他特定的错误状态码。

【相关推荐】

• 给你找了一篇非常好的博客，你可以看看是否有帮助，链接：【Ant Design Pro】使用ant design pro做为你的开发模板（完结篇）上线部署项目

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^