欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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)文章

  • element-ui tree結(jié)構(gòu)實現(xiàn)增刪改自定義功能代碼

    element-ui tree結(jié)構(gòu)實現(xiàn)增刪改自定義功能代碼

    這篇文章主要介紹了element-ui tree結(jié)構(gòu)實現(xiàn)增刪改自定義功能代碼,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-08-08
  • vue組合式API淺顯入門示例詳解

    vue組合式API淺顯入門示例詳解

    這篇文章主要為大家介紹了vue組合式API淺顯入門示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2023-03-03
  • 淺談vue中computed屬性對data屬性賦值為undefined的原因

    淺談vue中computed屬性對data屬性賦值為undefined的原因

    本文主要介紹了淺談vue中computed屬性對data屬性賦值為undefined的原因,文中通過示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2022-02-02
  • Vue狀態(tài)管理庫Vuex的入門使用教程

    Vue狀態(tài)管理庫Vuex的入門使用教程

    Vuex是一個專門為Vue.js應(yīng)用程序開發(fā)的狀態(tài)管理庫。它采用了一個集中式的架構(gòu),將應(yīng)用程序的所有組件的狀態(tài)存儲在一個單獨的地方。這使得狀態(tài)的管理和維護變得更加容易
    2023-03-03
  • Vue slot用法(小結(jié))

    Vue slot用法(小結(jié))

    這篇文章主要介紹了Vue slot用法(小結(jié)),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-10-10
  • VsCode里的Vue模板的實現(xiàn)

    VsCode里的Vue模板的實現(xiàn)

    這篇文章主要介紹了VsCode里的Vue模板的實現(xiàn),文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2020-08-08
  • vue、uniapp中動態(tài)添加綁定style、class?9種實現(xiàn)方法

    vue、uniapp中動態(tài)添加綁定style、class?9種實現(xiàn)方法

    這篇文章主要介紹了vue、uniapp中動態(tài)添加綁定style、class?9種方法實現(xiàn),本文通過實例代碼給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2023-09-09
  • 使用v-memo緩存模板子樹提高應(yīng)用性能詳解

    使用v-memo緩存模板子樹提高應(yīng)用性能詳解

    這篇文章主要為大家介紹了使用v-memo緩存模板子樹提高應(yīng)用性能詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2022-09-09
  • vue-ls vue本地儲存的實例講解

    vue-ls vue本地儲存的實例講解

    這篇文章主要介紹了vue-ls vue本地儲存的實例講解,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-04-04
  • 詳解如何使用Vue2做服務(wù)端渲染

    詳解如何使用Vue2做服務(wù)端渲染

    本篇文章主要介紹了如何使用Vue2做服務(wù)端渲染 ,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-03-03

最新評論