vue 多代理

多代理就要建立多个axios实例对象

vueconfig

devServer: {
    open: true,
    host: "localhost",
    // host: "10.3.96.228",

    port: "8020",
    proxy: {
      "/api1": {
        target: "https://testapps.eshiyun.info", // 测试环境 城市漫游
        ws: false,
        changeOrigin: true,
        pathRewrite: {
          "^/api1": "",
        },
      },
      "/api": {
        target: "https://cdpre.tfsmy.com", // 测试环境代理2本地资讯
        ws: false,
        changeOrigin: true,
        pathRewrite: {
          "^/api": "",
        },
      },
    },
  },

每个接口文件写自己代理接口。之后全部导入index文件

// 城市漫游接口文件
import axios from "axios";
import Qs from "qs";
import { Toast } from "vant"; // 按需引入

let origin = window.location.origin; // 多环境打包--从url中获取【协议域名端口】
let baseUrl = "";

if (window.location.hostname === "localhost") {
  baseUrl = "/api1"; // 【本地开发】 用
} else {
  baseUrl = origin; // 打包【测试/生产】 用
}

const instance = axios.create({
  baseURL: baseUrl,
  timeout: 10 * 1000, // 10s timeout
});

instance.defaults.headers.post["Content-Type"] =
  "application/x-www-form-urlencoded";

// 请求拦截
instance.interceptors.request.use(
  (config) => {
    config.headers["cityCode"] = "460100";
    config.headers["platform"] = "1";
    config.headers["eshimin-version"] = "1.1.0.03";
    config.headers["ramble"] = "1";

    return config;
  },
  // 对请求错误做些什么
  (error) => {
    return Promise.reject(error);
  }
);

// 响应拦截
instance.interceptors.response.use(
  // 2xx 范围内的任何状态代码都会触发此函数
  (response) => {
    if (response.status === 200) {
      // 如果返回的状态码为200，说明接口请求成功，可以正常拿到数据
      // 处理响应数据
      return Promise.resolve(response);
    } else {
      return Promise.reject(response);
    }
  },
  // 任何 非2xx 范围的状态代码都会触发此功能
  (error) => {
    // 关闭loading
    Toast.clear();
    // 异常响应的处理开始
    // 具体要处理多少种状态码，需和后端沟通一致，这里仅作示例
    if (error && error.response) {
      // 根据响应码处理
      switch (
        error.response.status // 注意：error.response.status的类型是number
      ) {
        case 400:
          Toast("这是个错误请求");
          break;
        // 注意这里需要后端配合，将响应的重定向状态码302重置为401，
        // 因为3xx的状态码前端捕获不到
        case 401:
          Toast("需要用户进行身份认证");
          // 这里捕获到重定向响应，就跳转到登录页
          // window.top.location.href = baseUrl + '/boss/a';
          break;
        case 404:
          Toast("请求的资源不存在");
          break;
        case 500:
          Toast("服务端出错");
          break;
        default:
          Toast(`连接出错${error.response.status}`);
      }
    } else {
      if (error.message.indexOf("timeout") !== -1) {
        // 超时处理
        Toast("请求超时，请重试~");
      } else {
        Toast("未知错误：" + error);
      }
    }
    // 抛出请求的错误信息
    return Promise.reject(error);
  }
);

function get(url, params) {
  return new Promise((resolve, reject) => {
    instance
      .get(url, {
        params: params,
      })
      .then((res) => {
        resolve(res.data);
      })
      .catch((err) => {
        reject(err.data);
      });
  });
}

/**
 * 封装post方法
 * url--请求的url地址
 * params--请求时携带的参数
 */
function post(url, params = {}) {
  return new Promise((resolve, reject) => {
    instance
      .post(url, Qs.stringify(params))
      .then((res) => {
        resolve(res.data);
      })
      .catch((err) => {
        reject(err.data);
      });
  });
}

/***
 * 公共接口 示例
 *
 * */

//cityId params里面有个参数 获取天气接口
export function getWeather(params = {}) {
  return get("/weather/forecast", params);
}

//
export function getRraKey(params = {}) {
  return post("/service-converge-consumer/rsaKey", params);
}

export function serviceList(params) {
  return post("/service-converge-consumer/service/list", params);
}
// //获取首页新闻聚合接口
// export function aggregate(params = {}) {
//   return get("/aggregate/api/home/cms", params);
// }

index

import { getWeather, getRraKey, serviceList } from "./api";
import { aggregate } from "./api1";

export default {
  getWeather,
  getRraKey,
  serviceList,
  aggregate,
};