vue項目中如何調(diào)用多個不同的ip接口
更新時間：2022年08月09日 16:45:03 作者：曾經(jīng)的你d
這篇文章主要介紹了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)文章
這篇文章主要介紹了VUE項目實現(xiàn)主題切換的方法，本文通過多種方法給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-11-11
本篇文章將與各位開發(fā)者分享下 vue-native-websocket 庫的使用以及配置，通過實例代碼給大家分享Vue通過配置WebSocket并實現(xiàn)群聊功能，需要的朋友可以參考下2019-12-12
keep-alive是Vue中一個非常有用的特性,它可以幫助我們避免重復(fù)渲染和減少組件的渲染次數(shù),從而提高應(yīng)用程序的性能,本文給大家介紹keep-alive組件緩存的相關(guān)知識,感興趣的朋友一起看看吧2024-01-01
vue 使用class創(chuàng)建和清除水印的示例代碼
這篇文章主要介紹了vue 使用class創(chuàng)建和清除水印的示例代碼，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2020-12-12
vue2.0結(jié)合DataTable插件實現(xiàn)表格動態(tài)刷新的方法詳解
這篇文章主要介紹了vue2.0結(jié)合DataTable插件實現(xiàn)表格動態(tài)刷新的方法,結(jié)合具體項目實例形式分析了vue2.0結(jié)合DataTable插件實現(xiàn)表格動態(tài)刷新過程中遇到的問題與相應(yīng)的解決方法,需要的朋友可以參考下2017-03-03
這篇文章主要介紹了Vue操作DOM解決顯示位置問題,文中通過代碼示例講解的非常詳細(xì),對大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2024-12-12
解決ant-design-vue中menu菜單無法默認(rèn)展開的問題
這篇文章主要介紹了解決ant-design-vue中menu菜單無法默認(rèn)展開的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
Vue3中從一個頁面(index)傳輸數(shù)值到另一個頁面(form)的方法詳解
在 Vue 3 開發(fā)中,經(jīng)常需要在不同組件或頁面之間傳遞數(shù)據(jù),例如從 index 頁面獲取某個數(shù)值（如 cntr、tradeId）后,將其傳輸?shù)?nbsp;form 頁面進行填寫或編輯,本文將介紹幾種常見的數(shù)據(jù)傳輸方法,并為每種方法提供一個小的 Demo 代碼示例,需要的朋友可以參考下2025-02-02
公共Hooks封裝文件下載useDownloadFile實例詳解
這篇文章主要為大家介紹了公共Hooks封裝文件下載useDownloadFile實例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-11-11
vue實現(xiàn)圖片加載完成前的loading組件方法
下面小編就為大家分享一篇vue實現(xiàn)圖片加載完成前的loading組件，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02