vue專案中如何呼叫多個不同的ip介面

2022-08-09 22:00:43

如何呼叫多個不同的ip介面

靈感來源：

專案的登入登出許可權是調A的ip下面的介面,其他的功能調的介面是B的ip下面的介面

思路：

其實就是多寫幾個request.js檔案罷了，或者在一個檔案裡面多寫幾個響應攔截和請求攔截.

上程式碼：

第一個檔案

request.js

import axios from 'axios'
import Vue from 'vue'
if(process.env.NODE_ENV == "development"){//開發環境
  axios.defaults.baseURL = 'http://xxxxxx/air/';
}else if(process.env.NODE_ENV == "production"){
  axios.defaults.baseURL = '/air/api'; // 生產環境
}
const service = axios.create({
  timeout: 20000,
})
// 請求攔截
service.interceptors.request.use(
  config => {
    return config;
  },
  error => {
    // 請求錯誤處理.......
  }
)
// 響應攔截
service.interceptors.response.use(
  response =>{
    //響應結果處理.......
  },
  error => {
    // 請求錯誤處理.......
  }
)
export default service

第二個檔案

requestSec.js

import axios from 'axios'
import Vue from 'vue'
if(process.env.NODE_ENV == "development"){//開發環境
  axios.defaults.baseURL = 'http://xxxxxx/air/';
}else if(process.env.NODE_ENV == "production"){
  axios.defaults.baseURL = '/air/api'; // 生產環境
}
const sec = axios.create({
  timeout: 20000,
})
// 請求攔截
sec.interceptors.request.use(
  config => {
    return config;
  },
  error => {
    // 請求錯誤處理.......
  }
)
// 響應攔截
sec.interceptors.response.use(
  response =>{
    //響應結果處理.......
  },
  error => {
    // 請求錯誤處理.......
  }
)
export default sec

哎?你會發現這兩個檔案不是一樣的嗎,對,就是一樣的,只不過是宣告了兩個請求攔截和響應攔截罷了.你也可以放到一個檔案裡面.都一樣.

第三個檔案

封裝的介面檔案

import axios from './request'
import sec from './requestSec'
// 登入
export function login(data) {
  return sec({
    method:'post',
    url:'system/login',
    data,
  })
}
// 分頁查詢所有管轄區域
export function queryWithPageAll(params) {
  return axios({
    method:'get',
    url:'area/queryAll',
    params
  })
}

到這裡就可以看出不一樣了，如果要呼叫request裡面ip下面的介面就return axios 如果要呼叫requestSec裡面ip下面的介面就return sec

其他就是正常的了，哪個頁面呼叫就正常呼叫就可以了.

設定自動設定不同環境介面

1.再根目錄新建一個資料夾configenv

在資料夾下新建baseServerConfig.js

module.exports = {
  // 本地環境設定 測試介面的地址
  "localhost:8010": {
    mallUrl: 'http://202.108.22.5:8000',
    storeHouseUrl: 'http://202.108.22.103:8080',
  },
  // 本地IP環境設定 測試介面的地址
  "10.12.5.46:8010": {
    mallUrl: 'http://202.108.22.5:8000',
    storeHouseUrl: 'http://202.108.22.103:8080',
  },
  // 測試環境設定 測試介面的地址
  "22.81.24.60:8080": {
    mallUrl: 'http://202.108.22.5:8000',
    storeHouseUrl: 'http://202.108.22.103:8080',
  },
  // UAT環境設定 UAT介面地址
  "uat.baidu.com": {
    mallUrl: 'http://uat.baidu.com',
    storeHouseUrl: 'http://uat-init.baidu.com' 
  },
    //生產環境設定 生產介面地址
  "www.baidu.com": {
    mallUrl: 'http://www.baidu.com',
    storeHouseUrl: 'http://init.baidu.com' 
  }
}

2.在main.js 入口檔案中

引入baseServerConfig，用變數接收當前的環境對應的介面地址，把這個變數放入Vue的原型的屬性上

import baseServer from '../configenv/baseServerConfig'
const mallUrl= baseServer[location.host].mallUrl
const storeHouseUrl= baseServer[location.host].storeHouseUrl
Vue.prototype.mallUrl= mallUrl;//商城地址
Vue.prototype.storeHouseUrl= storeHouseUrl;//倉庫地址

3.在實際Vue頁面中，介面實際呼叫

this.$http.get(this.mallUrl+"/api/a/b/c").then(resp =>{
    // 寫邏輯
}）
this.$http.get(this.storeHouseUrl+"/api/abc/b/c").then(resp =>{
    // 寫邏輯
}）

小結：這樣就實現了當前環境與不同環境介面相互繫結，避免人員重複的切換介面環境。

從而實現了npm run build 一個包既可以放在測試環境、UAT環境和生產環境

以上為個人經驗，希望能給大家一個參考，也希望大家多多支援it145.com。