数据请求封装

系统的所有请求都封装在 request.js 文件中，而 request.js 中调用的方法都使用的 ajax.js 封装。

ajax.js

方法

  • get(url, param, extendParam)
  • post(url, param, extendParam)
  • postJson(url, param, extendParam)
  • patchJson(url, param, extendParam)
  • delete(url, extendParam)

防止重复请求机制

除了get方法，其他方法都已经添加了去除重复请求的机制。

  1. if (this.isRequesting(url)) {
  2.   return new Promise((resolve, reject) => { reject(new Error('This request is requesting')); });
  3. }

该机制可以让开发人员在表单提交的时候，不需要做特殊的防止重复请求的处理。

如果你确定一个请求可以重复请求，比如说，复杂的搜索使用post请求，可以传递 extendParam = {repeatable: true}

  1. search(params) {
  2.   return Ajax.postJson(`/search/project`, params, {repeatable: true});
  3. }

返回结果封装

所有的请求结果都是统一封装，所以在调用请求方法的时候，不需要添加catch处理。

统一封装的结构为：

  1. {
  2.   ok: true,
  3.   body: {},
  4.   meta: {},
  5.   msg: ''
  6. }

接口的一些报错将做统一的处理：

  1. return new Promise((resolve) => {
  2.   return axios.request(params).then((response) => {
  3.     that.deleteRequest(params.url);
  4.     let data = response.data;
  5.     let status = response.status;
  6.     // 如果后端统一封装返回，即所有的请求都是200, 错误码由返回结果提供，则使用以下代码获取状态
  7.     // if (status == 200) {
  8.     //   status = data.status;
  9.     // }
  10.     if (status != 200) {
  11.       if (status == 401) {
  12.         window.top.location = '/login';
  13.         return;
  14.       }
  15.       if (status == 500) {
  16.         HeyUI.$Message.error('后台异常');
  17.       } else if (status == 404) {
  18.         HeyUI.$Message.error('请求不存在');
  19.       } else if (status != 200) {
  20.         HeyUI.$Message.error(data._msg || '请求异常');
  21.       }
  22.     }
  23.     data.ok = data.status == 200;
  24.     resolve(data);
  25.   }).catch(() => {
  26.     that.deleteRequest(params.url);
  27.     resolve({
  28.       ok: false
  29.     });
  30.   });
  31. });

request.js

定义

  1. import Ajax from './ajax';
  3. const Request = {
  4.   // 定义模块
  5.   User: {
  6.     // 模块下面的方法
  7.     info() {
  8.       return Ajax.get('/account/info');
  9.     }
  10.   }
  11. };
  13. export default Request;

请求调用

request.js 已经定义为全局变量 R，所以可以直接调用：

  1. R.User.info().then((resp) => {
  2.   if (resp.ok) {
  3.     // 执行代码
  4.     this.$Message.success('保存成功');
  5.   }
  6.   // 无论结果成功或者失败，都执行的代码
  7.   this.loading = false;
  8. });