请求数据

系统内置了 axios 作为异步请求工具，并进行了一系列封装。

设置接口请求地址

在前面章节配置-业务配置中已经介绍到统一的接口请求地址，只需在 src/setting.js 或者 public/config.js 中设置 apiBaseURL 即可。

配置说明

系统默认对 axios 的请求和返回做了一定的封装，使用者可适当根据后端接口规范做调整，也可与后端工程师约定请求和返回的规范，遵循约定大于配置的原则。

数据请求代码在 src/plugins/request/index.js 中。

请求拦截器

service.interceptors.request.use(
  config => {
    // 在请求发送之前做一些处理
    const token = util.cookies.get('token');
    // 让每个请求携带token-- ['X-Token']为自定义key 请根据实际情况自行修改
    config.headers['X-Token'] = token;
    return config;
  },
  error => {
    // 发送失败
    console.log(error);
    Promise.reject(error);
  }
);

可以看到，系统默认拦截了请求，并在 header 中设置了一个 X-Token 的参数，值为登录用户的 token，这个常用于后端做权限校验，如果你的项目不是基于此校验，可以忽略或修改。

响应拦截器

对于请求的响应也做了封装，首先是状态码的判断，这个需要与后端工程师约定。

response => {
  // dataAxios 是 axios 返回数据中的 data
  const dataAxios = response.data;
  // 这个状态码是和后端约定的
  const { code } = dataAxios;
  // 根据 code 进行判断
  if (code === undefined) {
    // 如果没有 code 代表这不是项目后端开发的接口
    return dataAxios;
  } else {
    // 有 code 代表这是一个后端接口 可以进行进一步的判断
    switch (code) {
    case 200:
      // [ 示例 ] code === 200 代表没有错误
      return dataAxios.data;
    default:
      // 不是正确的 code
      errorCreate(`${dataAxios.msg}: ${response.config.url}`);
      break;
    }
  }
}

这里默认是对 response.data.code 为 0 作为了请求正确的判断，并返回数据，其它的状态码判断需要用户自己补充。不过这都不是必要的，需要视情况而定。

对于错误，也有拦截：

error => {
  if (error && error.response) {
    switch (error.response.status) {
      case 400: error.message = '请求错误'; break;
      case 401: error.message = '未授权，请登录'; break;
      case 403: error.message = '拒绝访问'; break;
      case 404: error.message = `请求地址出错: ${error.response.config.url}`; break;
      case 408: error.message = '请求超时'; break;
      case 500: error.message = '服务器内部错误'; break;
      case 501: error.message = '服务未实现'; break;
      case 502: error.message = '网关错误'; break;
      case 503: error.message = '服务不可用'; break;
      case 504: error.message = '网关超时'; break;
      case 505: error.message = 'HTTP版本不受支持'; break;
      default: break;
    }
  }
  errorLog(error);
  return Promise.reject(error);
}

发出请求

理论上，您可以在任何导入了 src/plugins/request 的地方发出请求，并获取数据完成业务逻辑，但出于可维护性考虑，我们建议您在 .vue 页面文件中，一般不要直接发起请求数据，而是将请求封装在 src/api 目录对应的文件下，这样会使项目结构清晰，各司其职。

举例说明，首先创建文件 src/api/article.js：

import request from '@/plugins/request';

export default {
  // get请求
  getDemo (params) {
    return request({
      url: '/demo',
      method: 'get',
      params
    });
  },
  // post请求
  postDemo (data) {
    return request({
      url: '/demo',
      method: 'post',
      data
    });
  }
}

getDemo 函数接收 data 参数，这个 data 就是我们要发给服务器的数据。在 src/api 下，基本不含有业务逻辑，不同的函数只负责发送不同的请求。

然后在对应的 .vue 页面文件中调用 this.$api.getDemo 函数（部分代码省略）：

默认已经将 api/js 导入到了全局，可以直接使用this.$api

<script>
  export default {
    data () {
      return {
        title: '',
        content: ''
      }
    },
    methods: {
      handleCreate () {
        this.$api.getDemo({
          title: this.title,
          content: this.content
        })
        .then(res => {
            // 返回数据
        })
        .catch(err => {
            // 异常情况
        })
      }
    }
  };
</script>

模拟数据

登录在线MOCK使用，只需更改apiBaseURL既可，请访问地址 http://ued.depts.bingosoft.net:86 查看具体使用文档