vue-封装axios处理相应请求，结合打包时配置不同的地址

【封装axios对响应进行处理】
安装axios npm install axios -g；

**

单独创建一个文件，命名api(自由取名)，api文件下至少包含两个文件；

**

config.js写axios相关配置，http.js是的接口请求
---------------------------------config.js-------------------------------------------

 1. 引入axios

import axios from "axios";

2.配置后端请求地址
	这里要注意，后端在测试的时候可能是多个地址给你调用，我就是这种情况，所有我也相应的要准备三个地址提供api；
	let baseURL1,baseURL2,baseURL3;
	baseURL1='http://xxx.xxx.xx.xx:xxxx';(以此类推)
3.创建axios实例
	const axios_api = axios.create({
	  	baseURL: "", // 这个是真正发生请求时的地址，之前的三个就是为了发送请求所做的分类
	  	timeout: 10000, // 请求超时时间
	});
4.对请求参数做处理------request拦截器
axios_api.interceptors.request.use(
  (config) => {
  //这个地方做分支是因为请求了不同的接口，为了区分开，所以在接口请求的时候添加了val值，这样根据val值请求不同的地址
  例:【
		export const queryRecommend = (data) => {
		  return axios_api({
		    url: "/xxxxxx/xxx",
		    val: "url3",  //请求分类
		    method: "post",  //类型
		    data,  //携带参数
		  });
		};
	】
    switch (config.val) {  
      case "url1":
        config.baseURL = baseURL1;
        break;
      case "url2":
        config.baseURL = baseURL2;
        break;
      case "url3":
        config.baseURL = baseURL3;
        break;
    }
    //获取token
    const token = localStorage.getItem("UserId");
    if (token) {
      config.headers["Authorization"] = token;
    }
    //判断请求方式
    config.method === "post" ? config.data : config.params;
    //设置请求头
    config.headers["tenantId"] = "xxxxxxxxxxxxxxxxx";

    return config;
  },
  (error) => {
    //请求错误处理
    return Promise.reject(error);
  }
);

5.对响应做处理 ---respone拦截器
axios_api.interceptors.response.use(
  (response) => {
    //成功请求到数据
    //这里根据后端提供的数据进行对应的处理
    return response.data;
  },
  (error) => {
    //响应错误处理
    let errText = JSON.parse(JSON.stringify(error)).status;
    switch (errText) {
      case 401:
        let logOut = logout();  -->这里是封装的清除token方法
        if (logOut) {
          //退出成功
          message.warning("身份验证过期，请重新登录");  -->antd自带提示框
          setTimeout(() => {
            window.location.reload();
          }, 500);
        }
        break;
    }
  }
);

打包vue文件时控制不同的接口地址

为什么这样做呢，因为项目有多个环境，常见的有开发环境，测试环境，正式环境。而三个环境对应的地址都不一样，尤其是测试环境和正式环境，测试环境和开发环境的地址一般来说是一样的，我就是的，所有接下来对其进行控制。

1.创建  .env.development  （开发环境）
		.env.production （正式环境/生产环境）
		.env.test （测试环境）
2.文件内容分别为
	NODE_ENV = 'development'
	VUE_APP_CURENV = 'development'
	----------------------------------------
	NODE_ENV = 'production'
	VUE_APP_CURENV = 'production'
	-----------------------------------------
	NODE_ENV = 'test'
	VUE_APP_CURENV = 'test'
3.在package.json文件中修改以下配置（上图有）
"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build --mode production",  //打包正式环境
    "build:test": "vue-cli-service build --mode test"  //打包测试环境
  },
4.对axios中config.js进行修改
	//打包的时候判断环境  process.env.VUE_APP_CURENV
	switch (process.env.VUE_APP_CURENV) {
	  case "development":
	    // console.log("当前为开发环境");
	    baseURL1 = "http://xxx1"; // api1
	    baseURL2 = "http://xxx2"; // api2
	    baseURL3 = "http://xxx3"; // api3
	    break;
	  case "test":
	    // console.log("当前为测试环境");
	    baseURL1 = "http://xxx1"; // api1
	    baseURL2 = "http://xxx2"; // api2
	    baseURL3 = "http://xxx3"; // api3
	    break;
	  case "production":
	    // console.log("当前为生产环境");
	    let publicUrlHead = "http://xxxxxxxxx"; //公共请求地址
	    baseURL1 = publicUrlHead + "xxx"; // api1  
	    baseURL2 = publicUrlHead + "xxx"; // api2
	    baseURL3 = publicUrlHead + "xxx"; // api3
	    break;
	}

end。