数据请求是我们开发中非常重要的一环，如何优雅地进行抽象处理，不是一件很容易的事情，也是经常被忽略的事情，处理不好的话，重复的代码散落在各处，维护成本极高。
所以我们需要好好梳理下数据请求涉及到哪些方面，对它有整体的管控，从而设计出扩展性高的方案。
参数配置
首先，我们处理下参数的配置，
- 首先需要防止 CSRF，那我们需要在请求中的 headers 加上 X-XSRF-TOKEN
- 还需要一个params请求体，请求体需要在post和get请求做一个区分
- 除了防止csrf的header配置，如果另外请求有别的配置，比如content-type之类的，需要一个config
所以，我们将这一部分，封装成一个request.js文件，并export出几个请求方法，post和get
import axios from 'axios';
// The http header that carries the xsrf token value { X-XSRF-TOKEN: '' }
const csrfConfig = {
'X-XSRF-TOKEN': '',
};
// Build uniform request
async function buildRequest(method, url, params, options) {
let param = {};
let config = {};
if (method === 'get') {
param = { params, ...options };
} else {
param = JSON.stringify(params);
config = {
headers: {
...csrfConfig,
},
};
config = Object.assign({}, config, options);
}
return axios[method](url, param, config);
}
export const get = (url, params = {}, options) => buildRequest('get', url, params, options);
export const post = (url, params = {}, options) => buildRequest('post', url, params, options);
这样的话，我们对外就暴露出 get 和 post 的方法，其他请求类似，在此只用 get 和 post 作为示例，入参分别是 API地址，数据 和 扩展配置
异常处理
- 全局异常，也可以说是通用的异常，比如服务端返回503，网络异常，登录失效，无权限等，这些异常是可以预料并可控的，只要和服务端约定好格式，捕获下异常再展示出来即可。
- 业务异常，指的是和业务逻辑紧密相关的，比如提交失败，数据校验失败等，这些异常往往每个接口有不一样的情况，而且需要个性化展示错误，所以这部分可能不能进行统一处理，有时候需要把展示错误交到 View 层去实现。
之前的方案是在请求中不断地去catch，但是发现这样冗余代码太多，如果这部分异常处理需要抽象出来，则要用到axios 提供的 interceptors 功能，这样可以将异常的处理和核心的请求方法隔离出来，毕竟这部分是要和 UI 进行交互的。
import axios from 'axios';
// Add a response interceptor
axios.interceptors.response.use((response) => {
const { config, data } = response;
// 和服务端约定的 Code
const { code } = data;
switch (code) {
case 200:
return data;
case 401:
// 登录失效
break;
case 403:
// 无权限
break;
default:
break;
}
if (config.showError) {
// 接口配置指定需要个性化展示错误
return Promise.reject(data);
}
// 默认展示错误
// ... Toast error
}, (error) => {
// 通用错误
if (axios.isCancel(error)) {
// Request cancel
} else if (navigator && !navigator.onLine) {
// Network is disconnect
} else {
// Other error
}
return Promise.reject(error);
});
请求监控
请求监控这块和异常处理类似，只不过这里只是记录情况，不涉及到 UI 上的交互或者和业务代码的交互，所以可以把这部分逻辑直接写在异常处理那里，或者在请求后再添加一个拦截器，单独处理。
axios.interceptors.response.use((response) => {
const { status, data, config } = response;
// 根据返回的数据和接口参数配置，对请求进行埋点
}, (error) => {
// 根据返回的数据和接口参数配置，对请求进行埋点
});
好了，到现在为止，参数配置、异常处理 和 请求监控 都设计完了，有三个文件：
request.js：请求库配置，对外暴露出 get，post 方法。
error.js：请求的一些异常处理，涉及到和外面对接的是该接口是否需要个性化展示错误。
monitor.js：请求的情况记录，比较独立的一块。
那在页面上调用的时候可以这样子：
import { get, post } from 'request.js';
get('/user/info').then((data) => {});
post('/user/update', { name: 'beyondxgb' }, { showError: true }).then((data) => {
if (data.code !== 200) {
// 展示错误
} else {
// do something
}
});
