91超碰碰碰碰久久久久久综合_超碰av人澡人澡人澡人澡人掠_国产黄大片在线观看画质优化_txt小说免费全本

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

vue項目中怎么調用多個不同的ip接口

發布時間:2022-08-10 09:39:21 來源:億速云 閱讀:479 作者:iii 欄目:開發技術

這篇文章主要介紹“vue項目中怎么調用多個不同的ip接口”,在日常操作中,相信很多人在vue項目中怎么調用多個不同的ip接口問題上存在疑惑,小編查閱了各式資料,整理出簡單好用的操作方法,希望對大家解答”vue項目中怎么調用多個不同的ip接口”的疑惑有所幫助!接下來,請跟著小編一起來學習吧!

如何調用多個不同的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環境和生產環境 

到此,關于“vue項目中怎么調用多個不同的ip接口”的學習就結束了,希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習,快去試試吧!若想繼續學習更多相關知識,請繼續關注億速云網站,小編會繼續努力為大家帶來更多實用的文章!

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

西充县| 交口县| 鹤庆县| 南木林县| 调兵山市| 四子王旗| 泊头市| 扶余县| 恩施市| 平果县| 抚州市| 富川| 南部县| 新绛县| 松原市| 中江县| 宝丰县| 津南区| 霍邱县| 桂林市| 洪泽县| 繁峙县| 天祝| 漳平市| 东明县| 信宜市| 白城市| 兴隆县| 永川市| 汉川市| 昂仁县| 长乐市| 繁昌县| 建平县| 微博| 台安县| 阿克苏市| 高青县| 电白县| 二连浩特市| 新龙县|