requestErrorConfig.ts 3.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118
  1. import type { RequestOptions } from '@@/plugin-request/request';
  2. import type { RequestConfig } from '@umijs/max';
  3. import { message, notification } from 'antd';
  4. // 错误处理方案: 错误类型
  5. enum ErrorShowType {
  6. SILENT = 0,
  7. WARN_MESSAGE = 1,
  8. ERROR_MESSAGE = 2,
  9. NOTIFICATION = 3,
  10. REDIRECT = 9,
  11. }
  12. // 与后端约定的响应数据格式
  13. export interface ResponseStructure {
  14. success: boolean;
  15. data: any;
  16. errorCode?: number;
  17. errorMessage?: string;
  18. showType?: ErrorShowType;
  19. }
  20. /**
  21. * @name 错误处理
  22. * pro 自带的错误处理, 可以在这里做自己的改动
  23. * @doc https://umijs.org/docs/max/request#配置
  24. */
  25. export const errorConfig: RequestConfig = {
  26. // 错误处理: umi@3 的错误处理方案。
  27. errorConfig: {
  28. // 错误抛出
  29. errorThrower: (res) => {
  30. const { success, data, errorCode, errorMessage, showType } =
  31. res as unknown as ResponseStructure;
  32. if (!success) {
  33. // const error: any = new Error(errorMessage);
  34. // error.name = 'BizError';
  35. // error.info = { errorCode, errorMessage, showType, data };
  36. // throw error; // 抛出自制的错误
  37. }
  38. },
  39. // 错误接收及处理
  40. errorHandler: (error: any, opts: any) => {
  41. if (opts?.skipErrorHandler) throw error;
  42. // 我们的 errorThrower 抛出的错误。
  43. if (error.name === 'BizError') {
  44. const errorInfo: ResponseStructure | undefined = error.info;
  45. if (errorInfo) {
  46. const { errorMessage, errorCode } = errorInfo;
  47. switch (errorInfo.showType) {
  48. case ErrorShowType.SILENT:
  49. // do nothing
  50. break;
  51. case ErrorShowType.WARN_MESSAGE:
  52. message.warning(errorMessage);
  53. break;
  54. case ErrorShowType.ERROR_MESSAGE:
  55. message.error(errorMessage);
  56. break;
  57. case ErrorShowType.NOTIFICATION:
  58. notification.open({
  59. description: errorMessage,
  60. message: errorCode,
  61. });
  62. break;
  63. case ErrorShowType.REDIRECT:
  64. // TODO: redirect
  65. break;
  66. default:
  67. message.error(errorMessage);
  68. }
  69. }
  70. } else if (error.response) {
  71. // Axios 的错误
  72. // 请求成功发出且服务器也响应了状态码,但状态代码超出了 2xx 的范围
  73. message.error(`Response status:${error.response.status}`);
  74. } else if (error.request) {
  75. // 请求已经成功发起,但没有收到响应
  76. // \`error.request\` 在浏览器中是 XMLHttpRequest 的实例,
  77. // 而在node.js中是 http.ClientRequest 的实例
  78. message.error('None response! Please retry.');
  79. } else {
  80. // 发送请求时出了点问题
  81. message.error('Request error, please retry.');
  82. }
  83. },
  84. },
  85. // 请求拦截器
  86. requestInterceptors: [
  87. (config: RequestOptions) => {
  88. // 拦截请求配置,进行个性化处理。
  89. // const url = config?.url?.concat('?token = 123');
  90. // 是否需要设置 token
  91. const isAdminToken = (config.headers || {})['authorization'];
  92. if (localStorage.getItem('Admin-Token') && !isAdminToken && config?.headers) {
  93. config.headers['authorization'] = localStorage.getItem('Admin-Token') + ''; // 让每个请求携带自定义token 请根据实际
  94. }
  95. return { ...config };
  96. },
  97. ],
  98. // 响应拦截器
  99. responseInterceptors: [
  100. (response) => {
  101. // 拦截响应数据,进行个性化处理
  102. const { data } = response as unknown as ResponseStructure;
  103. console.log(data);
  104. if (data?.code === 500) {
  105. if (data?.msg === '未登录或登录超时!') {
  106. }
  107. }
  108. if (data?.success === false) {
  109. message.error('请求失败!');
  110. }
  111. return response;
  112. },
  113. ],
  114. };