Ant Design Pro 5 网络请求和错误处理是怎样的

本篇文章为大家展示了Ant Design Pro 5 网络请求和错误处理是怎样的，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。

Ant Design Pro 5 的网络请求有点复杂，只看文档不阅读源码搞不清楚到底发生了什么事情。涉及到fetch umi-request @umijs/plugin-request Ant Design Pro 5相关代码。

fetch

代替XMLHttpRequest的访问和操纵HTTP的技术。fetch最大的问题是，只有在发生网络故障时或请求被阻止时，才抛出异常；而对于 HTTP 状态码为 404 或 500 之类的情况，会认为是正常的响应，并不会抛出异常。

参考资料：Fetch api

umi-request

基于 fetch 封装，提供诸如缓存、超时、字符编码处理、错误处理等功能。其中错误处理与开发紧密关联。

为了解决fetch在非成功状态码下，不抛出异常的情况，umi-request会判断HTTP状态码是否为2xx；如果不是，则会抛出异常。并且对fetch自己抛出的异常也进行了处理，加上了更多信息，便于后续的处理。

/src/middleware/parseResponse.js

    ...    .then(body => {      ...      if (copy.status >= 200 && copy.status < 300) {        // 提供源response, 以便自定义处理        if (getResponse) {          ctx.res = { data: body, response: copy };          return;        }        ctx.res = body;        return;      }      throw new ResponseError(copy, 'http error', body, req, 'HttpError');    })    .catch(e => {      if (e instanceof RequestError || e instanceof ResponseError) {        throw e;      }      // 对未知错误进行处理      const { req, res } = ctx;      e.request = e.request || req;      e.response = e.response || res;      e.type = e.type || e.name;      e.data = e.data || undefined;      throw e;    });    ...

参考资料：umi-request

@umijs/plugin-request

@umijs/plugin-request则在umi-request上又进行了封装。umi-request提供了错误处理机制，@umijs/plugin-request则提供了常规的错误处理方法，并约定了服务器返回响应的数据格式。还提供了useRequest。

需要特别注意的是，引用request时，要引用@umijs/plugin-request，而不是umi-request，否则会发现request的行为与@umijs/plugin-request文档描述的不一致。具体代码如下：

// 引用 umi-request 的 request。错误！！！import request from 'umi-request';// 引用 @umijs/plugin-request 的 reqeust。正确。import {request} from 'umi';

数据格式

约定服务器返回的数据格式如下：

interface ErrorInfoStructure {  success: boolean; // if request is success  data?: any; // response data  errorCode?: string; // code for errorType  errORMessage?: string; // message display to user   showType?: number; // error display type： 0 silent; 1 message.warn; 2 message.error; 4 notification; 9 page  traceId?: string; // Convenient for back-end Troubleshooting: unique request ID  host?: string; // onvenient for backend Troubleshooting: host of current access server}

对于服务器返回的数据于这个格式不一致的，可以在Ant Design Pro 5/src/app.tsx通过配置进行适配。但此适配只作用于错误处理，并影响接口返回的数据。所以在使用useRequest时，这个适配并没有用。

export const request: RequestConfig = {  errorConfig: {    adaptor: (resData) => {      return {        ...resData,        success: resData.ok,        errorMessage: resData.message,      };    },  },};

返回的数据格式中有success字段，用于描述请求是否成功。而umi-request对于http 2xx以外的响应都会抛出异常，此处的success又有何用呢？答案是http 2xx的请求也可以返回success:false从而人为的抛出一个异常。

但我们并不建议这样做，错误的请求应该返回http 2xx以外的响应，由umi-request自动抛出一个异常。所以适配数据结构时，success可始终为true。

/umijs/plugins/blob/master/packages/plugin-request/src/request.ts

  ...  const errorAdaptor = requestConfig.errorConfig?.adaptor || (resData => resData);  ...  // 中间件统一错误处理  // 后端返回格式 { success: boolean, data: any }  // 按照项目具体情况修改该部分逻辑  requestMethodInstance.use(async (ctx, next) => {    ...    const errorInfo = errorAdaptor(resData, ctx);    if (errorInfo.success === false) {      // 抛出错误到 errorHandler 中处理      const error: RequestError = new Error(errorInfo.errorMessage);      error.name = 'BizError';      error.data = resData;      error.info = errorInfo;      throw error;    }  });

如服务器按照格式返回数据，则一切较为顺利。但即使是正常的响应，也必须把数据包装在data字段里，这样在后端和前端都会感觉有些别扭。一般希望正常响应直接返回数据，只有在发生错误是，才返回类似的数据格式。

错误处理

错误处理时，也会调用上述的数据格式适配，所以并不是success不为false数据适配就无用了。主要从数据适配里获得showType errorMessage errorCode。

/umijs/plugins/blob/master/packages/plugin-request/src/request.ts

const errorAdaptor = requestConfig.errorConfig?.adaptor || (resData => resData);requestMethodInstance = extend({    errorHandler: (error: RequestError) => {      // @ts-ignore      if (error?.request?.options?.skipErrorHandler) {        throw error;      }      let errorInfo: ErrorInfoStructure | undefined;      if (error.name === 'ResponseError' && error.data && error.request) {        const ctx: Context = {          req: error.request,          res: error.response,        };        errorInfo = errorAdaptor(error.data, ctx);        error.message = errorInfo?.errorMessage || error.message;        error.data = error.data;        error.info = errorInfo;      }      errorInfo = error.info;      if (errorInfo) {        const errorMessage = errorInfo?.errorMessage;        const errorCode = errorInfo?.errorCode;        const errorPage =          requestConfig.errorConfig?.errorPage || DEFAULT_ERROR_PAGE;        switch (errorInfo?.showType) {          case ErrorShowType.SILENT:            // do nothing            break;          case ErrorShowType.WARN_MESSAGE:            message.warn(errorMessage);            break;          case ErrorShowType.ERROR_MESSAGE:            message.error(errorMessage);            break;          case ErrorShowType.NOTIFICATION:            notification.open({              message: errorMessage,            });            break;          case ErrorShowType.REDIRECT:            // @ts-ignore            history.push({              pathname: errorPage,              query: { errorCode, errorMessage },            });            // redirect to error page            break;          default:            message.error(errorMessage);            break;        }      } else {        message.error(error.message || 'Request error, please retry.');      }      throw error;    },    ...requestConfig,  });

错误显示类型

数据类型中showType字段的值有以下几个，配合错误处理方法，可以针对不同错误类型以不同的方式显示。

export enum ErrorShowType {  SILENT = 0, // 不提示错误  WARN_MESSAGE = 1, // 警告信息提示  ERROR_MESSAGE = 2, // 错误信息提示  NOTIFICATION = 4, // 通知提示  REDIRECT = 9, // 页面跳转}

useRequest

安装前面的数据格式约定，useRequest默认从响应数据里的data字段里获取数据。如果服务器端是直接返回数据，则需要在Ant Design Pro/config/config.ts配置：

  request: {    dataField: '',  }

需要注意，前面做的数据适配在useRequest里是无效的，不要认为做了数据适配就万事大吉了。当然服务器按照前面约定的数据格式返回数据就没这些烦恼了。

分页数据结构

Ant Design对分页数据的结构也有规定。

{   list: [],   current?: number,   pageSize?: number,   total?: number,}

如不符合这个格式，可以在useRequest的formatResult进行配置。如：

const { data, loading } = useRequest(() => {  return services.getUserList('/api/test');},{  formatResult: (result) => {    return ...  }});

参考资料：

• @umijs/plugin-request文档

• @umijs/plugin-request源码

Ant Design Pro 5

提供了自定义错误处理方法，和自定义数据格式的接口。默认的演示代码中，覆盖了@umijs/plugin-request的错误处理方法。如未注意到这点，则会迷惑于Ant Design Pro 5的错误处理行为与@umijs/plugin-request文档描述的并不一致，前面所述的错误显示类型完全无效。

Ant Design Pro/config/config.ts

const errorHandler = (error: ResponseError) => {  const { response } = error;  if (response && response.status) {    const errorText = codeMessage[response.status] || response.statusText;    const { status, url } = response;    notification.error({      message: `请求错误 ${status}: ${url}`,      description: errorText,    });  }  if (!response) {    notification.error({      description: '您的网络发生异常，无法连接服务器',      message: '网络异常',    });  }  throw error;};export const request: RequestConfig = {  errorHandler,};

上述内容就是Ant Design Pro 5 网络请求和错误处理是怎样的，你们学到知识或技能了吗？如果还想学到更多技能或者丰富自己的知识储备，欢迎关注编程网精选频道。