多代理就要建立多個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,
};