vue axios 二次封装+BaseUrl打包后自定义+api接口封装

因项目分支较多，或者部署的服务器不确定，打包后config.js不会被编译，方便发布者修改接口的Base

1、在static/（vue-cli2）或者pulice/（cli3）下新建config.js（自定义文件名）

var RUNTIME_ENVIRONMENT = 'TEST' // DEV 开发环境  TEST 测试环境   PRO 生产环境
var obj = {}

switch (RUNTIME_ENVIRONMENT) {
  case 'DEV':
    // 本地联调地址
    obj.ROOT_SERVER = 'http://localhost:9999'
    break
  case 'TEST':
    // 测试机地址
    obj.ROOT_SERVER = 'http://testapi.com'
    break
  case 'PRO':
    // 正式机地址
    obj.ROOT_SERVER = 'http://proapi.com'
    break
}

window.rootData = obj

2、引入到pulice/文件夹下的index.html中

<script src="./config.js"></script>

3、axios封装

import axios from "axios";
import { Message, Loading } from "element-ui";
import router from "../router";

// 基础地址
const baseURL = window.rootData.ROOT_SERVER;
// const baseURL = "/api";

//formdata
export let service = axios.create({
  baseURL,
  contentType: "application/x-www-form-urlencoded;charset=UTF-8",
  transformRequest: [
    function(data) {
      let ret = "";
      for (let it in data) {
        ret +=
          encodeURIComponent(it) + "=" + encodeURIComponent(data[it]) + "&";
      }
      return ret;
    }
  ]
});

//JSON
export let serviceJson = axios.create({
  baseURL
});

interceptors(service);
interceptors(serviceJson);

// 创建一个错误
function errorCreat(msg) {
  const err = new Error(msg);
  errorLog(err);
  throw err;
}
// 创建一个错误,且返回结果
function errorCreat2(msg) {
  const err = new Error(msg);
  errorLog(err);
}
// 记录和显示错误
function errorLog(err) {
  // 显示提示
  Message({
    message: err.message,
    type: "error",
    duration: 5 * 1000
  });
}

//拦截器
function interceptors(service) {
  // 请求拦截器
  service.interceptors.request.use(
    config => {
      // 在请求发送之前做一些处理
      const token = sessionStorage.getItem("token") || "";
      // 让每个请求携带token-- ['X-Token']为自定义key 请根据实际情况自行修改
      if (token) {
        config.headers["token"] = `${token}`;
      } else {
        router.replace({
          path: "/login"
        });
      }
      return config;
    },
    error => {
      // 发送失败
      Promise.reject(error);
    }
  );

  // 响应拦截器
  service.interceptors.response.use(
    response => {
      // dataAxios 是 axios 返回数据中的 data
      const dataAxios = response;
      // 这个状态码是和后端约定的
      const { code } = dataAxios.data;
      // 根据 code 进行判断
      if (code === undefined) {
        // 如果没有 code 代表这不是项目后端开发的接口 比如可能是 D2Admin 请求最新版本
        return dataAxios;
      } else {
        // 有 code 代表这是一个后端接口 可以进行进一步的判断
        switch (code) {
          case "200":
            return dataAxios.data;
          case "success":
            return dataAxios.data;
          case "warnning":
            return dataAxios.data;
          case "fail":
            // [ 示例 ] 其它和后台约定的 code
            errorCreat(dataAxios.data.message);
            break;
          case "1000":
            // [ 示例 ] 其它和后台约定的 code
            router.replace({
              path: "/login"
            });
            sessionStorage.clear();
            errorCreat2("登录状态失效，请重新登录");
            // break;
            return dataAxios.data;
          default:
            // 不是正确的 code
            errorCreat(`服务器内部错误,请联系管理员`);
            break;
        }
      }
    },
    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 = `请求地址出错，请联系管理员`;
            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:
            error.message = "未知错误，请联系管理员";
            break;
        }
      }
      errorLog(error);
      return Promise.reject(error);
    }
  );
}

4、新建api.js，引入axios封装的service, serviceJson（目的是将接口写到一个js中统一管理，可自行按模块划分）

/**********************************api.js***********************************/
import { service, serviceJson } from '@/axios'

//获取列表 (post: formData格式)
export const initList  = data => {
  return service({
    url: '/api/initList.do',
    method: 'post',
    data
  })
}
//获取列表 (post: JSON格式)
export const updateRow  = data => {
  return serviceJson({
    url: '/api/updateRow.do',
    method: 'post',
    data
  })
}
//获取详情 (get)
export const getRow  = params => {
  return service({
    url: '/api/getRow.do',
    method: 'get',
    params
  })
}

** 5、将api引入到vue文件使用**

 import { initList } from '@/api'
 
 methods: {
 	initData(){
          initList({pageSize:10,pageNum:1}).then(res => {
              console(res)
              console('请求成功')
          }).catch(err=>{
              // catch很少用到 可以不写，axios已封装自动弹出请求错误消息
              console(err)
              console('请求失败')
          })
    	}
 }