移动端axios封装

在vue项目中，和后台交互获取数据这块，我们通常使用的是axios库。axios文档参考axios文档。
（1）安装axios依赖
npm install axios --save;
（2）配置axios
在src/uitls文件下新增uitls文件夹，文件夹内新增request.js文件，在这里我们对axios进行初始化后，暴露给需要引用的文件，方便开发。

import axios from "axios";
import qs from "qs"; //按需引入qs模块处理参数
//创建axios实例，并进行配置
const instance = axios.create({
  baseURL: process.env.VUE_APP_BASE_API, // 环境变量文件内配置的接口服务地址
  timeout: 20000
});
//请求拦截
instance.interceptors.request.use(
  config => {
    // 这里可以自定义一些config 配置，根据项目实际情况更改
    let method = config.method.toUpperCase() ;
    if(method==='GET'){ // eg.针对get请求加时间戳防止缓存，
      /**添加时间戳,防止ie有缓存*/
      const data = Object.assign(config.params || {}, {
        time: new Date().getTime()
      });
   }
    return config
  },
  error => {
    return Promise.reject(error);
  }
);
//响应拦截
instance.interceptors.response.use(
  function(response) {
    let res = response.data;
    // 这里处理一些response 正常放回时的逻辑
    //eg.下方为示例返回数据结构，根据项目实际情况更改
    if (res.success === false) {
      const result = { //自定义错误提示数据结构
        code: 500,
        msg: res.msg
      };
      showErr(result);
      return Promise.reject(res);
    } else if (res.success === true) {
      return res.data;
    }
    return res
  },
  function(error) {
    showErr(error);
    return Promise.reject(error);
  }
);
//错误信息处理
function showErr(error) {
  // 此处可以处理公共错误提示
  console.log(error)
}
export default instance;

（3）api请求配置
在src/下新建api文件夹，新建分类的api请求文件。根据具体需要分类。主要是方便团队开发，容易归类。可以参考下面配置。

import request from "@/utils/request";
/**获取员工基本信息
 * @see http://xxxx/project/175/interface/api/25493
 */
const queryUser = () =>
  request.get(
    "/xx/xx/xx?service=stewardMakeBadge&method=queryUser"
  );
 
export default {
  queryUser
};