vue項目中如何調(diào)用多個不同的ip接口
如何調(diào)用多個不同的ip接口
靈感來源:
- 項目的登錄登出權(quán)限是調(diào)A的ip下面的接口,其他的功能調(diào)的接口是B的ip下面的接口
思路:
- 其實就是多寫幾個request.js文件罷了,或者在一個文件里面多寫幾個響應(yīng)攔截和請求攔截.
上代碼:
第一個文件
request.js
import axios from 'axios' import Vue from 'vue' if(process.env.NODE_ENV == "development"){//開發(fā)環(huán)境 ? axios.defaults.baseURL = 'http://xxxxxx/air/'; }else if(process.env.NODE_ENV == "production"){ ? axios.defaults.baseURL = '/air/api'; // 生產(chǎn)環(huán)境 } const service = axios.create({ ? timeout: 20000, }) // 請求攔截 service.interceptors.request.use( ? config => { ? ? return config; ? }, ? error => { ? ? // 請求錯誤處理....... ? } ) // 響應(yīng)攔截 service.interceptors.response.use( ? response =>{ ? ? //響應(yīng)結(jié)果處理....... ? }, ? error => { ?? ?// 請求錯誤處理....... ? } ) export default service
第二個文件
requestSec.js
import axios from 'axios' import Vue from 'vue' if(process.env.NODE_ENV == "development"){//開發(fā)環(huán)境 ? axios.defaults.baseURL = 'http://xxxxxx/air/'; }else if(process.env.NODE_ENV == "production"){ ? axios.defaults.baseURL = '/air/api'; // 生產(chǎn)環(huán)境 } const sec = axios.create({ ? timeout: 20000, }) // 請求攔截 sec.interceptors.request.use( ? config => { ? ? return config; ? }, ? error => { ? ? // 請求錯誤處理....... ? } ) // 響應(yīng)攔截 sec.interceptors.response.use( ? response =>{ ? ? //響應(yīng)結(jié)果處理....... ? }, ? error => { ?? ?// 請求錯誤處理....... ? } ) export default sec
哎?你會發(fā)現(xiàn)這兩個文件不是一樣的嗎,對,就是一樣的,只不過是聲明了兩個請求攔截和響應(yīng)攔截罷了.你也可以放到一個文件里面.都一樣.
第三個文件
封裝的接口文件
import axios from './request' import sec from './requestSec' // 登錄 export function login(data) { ? return sec({ ? ? method:'post', ? ? url:'system/login', ? ? data, ? }) } // 分頁查詢所有管轄區(qū)域 export function queryWithPageAll(params) { ? return axios({ ? ? method:'get', ? ? url:'area/queryAll', ? ? params ? }) }
到這里就可以看出不一樣了,如果要調(diào)用request里面ip下面的接口就return axios 如果要調(diào)用requestSec里面ip下面的接口就return sec
其他就是正常的了,哪個頁面調(diào)用就正常調(diào)用就可以了.
設(shè)置自動配置不同環(huán)境接口
1.再根目錄新建一個文件夾configenv
在文件夾下新建baseServerConfig.js
module.exports = { ? // 本地環(huán)境設(shè)置 測試接口的地址 ? "localhost:8010": { ? ? mallUrl: 'http://202.108.22.5:8000', ? ? storeHouseUrl: 'http://202.108.22.103:8080', ? }, ? // 本地IP環(huán)境設(shè)置 測試接口的地址 ? "10.12.5.46:8010": { ? ? mallUrl: 'http://202.108.22.5:8000', ? ? storeHouseUrl: 'http://202.108.22.103:8080', ? }, ? // 測試環(huán)境設(shè)置 測試接口的地址 ? "22.81.24.60:8080": { ? ? mallUrl: 'http://202.108.22.5:8000', ? ? storeHouseUrl: 'http://202.108.22.103:8080', ? }, ? // UAT環(huán)境設(shè)置 UAT接口地址 ? "uat.baidu.com": { ? ? mallUrl: 'http://uat.baidu.com', ? ? storeHouseUrl: 'http://uat-init.baidu.com'? ? }, ? ? //生產(chǎn)環(huán)境設(shè)置 生產(chǎn)接口地址 ? "www.baidu.com": { ? ? mallUrl: 'http://www.baidu.com', ? ? storeHouseUrl: 'http://init.baidu.com'? ? } }
2.在main.js 入口文件中
引入baseServerConfig,用變量接收當(dāng)前的環(huán)境 對應(yīng)的接口地址,把這個變量放入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頁面中,接口實際調(diào)用
this.$http.get(this.mallUrl+"/api/a/b/c").then(resp =>{ ?? ?// 寫邏輯 }) this.$http.get(this.storeHouseUrl+"/api/abc/b/c").then(resp =>{ ?? ?// 寫邏輯 })
小結(jié):這樣就實現(xiàn)了當(dāng)前環(huán)境 與 不同環(huán)境接口相互綁定,避免人員重復(fù)的切換接口環(huán)境。
從而實現(xiàn)了npm run build 一個包既可以放在測試環(huán)境、UAT環(huán)境和生產(chǎn)環(huán)境
以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
element-ui tree結(jié)構(gòu)實現(xiàn)增刪改自定義功能代碼
這篇文章主要介紹了element-ui tree結(jié)構(gòu)實現(xiàn)增刪改自定義功能代碼,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08淺談vue中computed屬性對data屬性賦值為undefined的原因
本文主要介紹了淺談vue中computed屬性對data屬性賦值為undefined的原因,文中通過示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2022-02-02vue、uniapp中動態(tài)添加綁定style、class?9種實現(xiàn)方法
這篇文章主要介紹了vue、uniapp中動態(tài)添加綁定style、class?9種方法實現(xiàn),本文通過實例代碼給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-09-09