服务器返回的响应数据无效,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 之类的情况，会认为是正常的响应，并不会抛出异常。

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;

});

...

@umijs/plugin-request

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

需要特别注意的是，引用request时，要引用@umijs/plugin-req