零、axios模塊引入
npm install axios
然後在你需要的地方開頭寫 import axios from 'axios'即可,我這裏是在axios/index.js裏面使用了,全部代碼看下面。
一、axios二次封裝
要想連兩個後臺,原理就是在vue-cli配置文件中封裝axios的地方創建兩個axios實例,然後在你寫的接口api位置調用具體的某個axios即可。所以我們首先先封裝axios,我這裏是封裝在了axios/index.js裏面的,全部代碼如下:
import axios from 'axios'
import store from '@/store'
import router from '../router'
import sessionStorage from '@/utils/sessionStorage'
function request(config){
//1.創建axios實例
const instance1 = axios.create({
baseURL:"http://11.1.1.11:8086/la", //我隨便編的url地址
timeout: 5000
})
const instance2 = axios.create({
baseURL:"http://22.2.2.22:8080/zhou",//我隨便編的url地址
timeout: 50000
})
//request攔截器
instance1.interceptors.request.use(
config => {
//每次發送請求之前檢測都vuex存有token,那麼都要放在請求頭髮送給服務器
if(store.getters.token){
config.headers.Authorization = store.getters.token;
}
return config;
},
err => {
return Promise.reject(err);
}
);
//respone攔截器
instance1.interceptors.response.use(
response => {
if(response){
if(response.data.data == 10001){
store.dispatch('UserLogout')
router.replace({
path:'/login',
query:{
redirect: router.currentRoute.fullPath
}
})
}
}
return response;
},
error => { //默認除了2XX之外的都是錯誤的,就會走這裏
if(error.response){
switch(error.response.status){
case 401:
store.dispatch('UserLogout'); //可能是token過期,清除它
router.replace({ //跳轉到登錄頁面
path: 'login',
query: { redirect: router.currentRoute.fullPath } // 將跳轉的路由path作爲參數,登錄成功後跳轉到該路由
});
}
}
return Promise.reject(error.response);
}
);
//發送真正的網絡請求
return [instance1,instance2]
}
export default request()
如果你不對實例進行攔截器處理,簡化以後就是這樣的:
import axios from 'axios'
import store from '@/store'
import router from '../router'
import sessionStorage from '@/utils/sessionStorage'
function request(config){
//1.創建axios實例
const instance1 = axios.create({
baseURL:"http://11.1.1.11:8086/la", //我隨便編的url地址
timeout: 5000
})
const instance2 = axios.create({
baseURL:"http://22.2.2.22:8080/zhou",//我隨便編的url地址
timeout: 50000
})
//發送真正的網絡請求
return [instance1,instance2]
}
export default request()
二、接收實例
兩個實例都暴露出來了,你只需要在你代碼封裝接口的api裏(我這裏是在api/area.js裏面)指定具體的實例即可。代碼如下
import request from '../axios'; //首先得引入axios/index.js裏面的實例request
export default{
queryIcAreaInfoList(data){
return request[1]({ //這裏使用的是axios/index.js裏面的第二個baseURL
url:'/area/queryIcAreaInfoList',
method:'post',
data:data
})
},
bookroom(data){
return request[0]({ //這裏使用的是axios/index.js裏面的第一個baseURL
url:'/bookroom/insert',
method:'post',
data:data
})
},
}
然後在你.vue代碼裏面調用你需要的接口就可以了
<script>
import area from "@/api/area.js"
export default {
data() {
return {
}
},
activated() {
this.getList(this.currentPage,this.pageSize)
},
methods: {
getList(cur,size) {
let obj = {}
area.queryIcAreaInfoList(obj).then(res => {
console.log('看看多後臺行不',res)
})
},
}
}
</script>
至此就完成了一個前端調用多個後臺的操作啦,是不是很簡單~
下面我們解決一下跨域問題。
就拿上面的例子舉例,如果我們實例化的instance2存在跨域問題,那麼我們需要使用proxyTable來解決。需要改的地方如下:
首先,在axios/index.js裏面把instance2的baseURL改爲隨便一個單詞,我這裏爲“/api":
import axios from 'axios'
import store from '@/store'
import router from '../router'
import sessionStorage from '@/utils/sessionStorage'
function request(config){
//1.創建axios實例
const instance1 = axios.create({
baseURL:"http://11.1.1.11:8086/la", //我隨便編的url地址
timeout: 5000
})
const instance2 = axios.create({
baseURL:"/api",//用/api來替代我們要訪問的url地址
timeout: 50000
})
//發送真正的網絡請求
return [instance1,instance2]
}
export default request()
然後,在config/index.js文件裏面配置proxyTable,完整代碼如下:
'use strict'
// Template version: 1.3.1
// see http://vuejs-templates.github.io/webpack for documentation.
const path = require('path')
module.exports = {
dev: {
// Paths
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {
'/api': {
target:'http://22.2.2.22:8080/zhou', //這裏就是剛剛用api替換的url地址
changeOrigin: true,
withCredentials:true,
pathRewrite: {
'^/api': ''
}
}
},
// Various Dev Server settings
host: 'localhost', // can be overwritten by process.env.HOST
port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
autoOpenBrowser: false,
errorOverlay: true,
notifyOnErrors: true,
poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-
/**
* Source Maps
*/
// https://webpack.js.org/configuration/devtool/#development
devtool: 'cheap-module-eval-source-map',
// If you have problems debugging vue-files in devtools,
// set this to false - it *may* help
// https://vue-loader.vuejs.org/en/options.html#cachebusting
cacheBusting: true,
cssSourceMap: true
},
build: {
// Template for index.html
index: path.resolve(__dirname, '../dist/index.html'),
// Paths
assetsRoot: path.resolve(__dirname, '../dist/'),
assetsSubDirectory: 'static',
assetsPublicPath: './',
/**
* Source Maps
*/
productionSourceMap: true,
// https://webpack.js.org/configuration/devtool/#production
devtool: '#source-map',
// Gzip off by default as many popular static hosts such as
// Surge or Netlify already gzip all static assets for you.
// Before setting to `true`, make sure to:
// npm install --save-dev compression-webpack-plugin
productionGzip: false,
productionGzipExtensions: ['js', 'css'],
// Run the build command with an extra argument to
// View the bundle analyzer report after build finishes:
// `npm run build --report`
// Set to `true` or `false` to always turn it on or off
bundleAnalyzerReport: process.env.npm_config_report
}
}
你的配置可以和我的有些區別,但是需要更改的其實只是這一段(注意target的url一定要以http://開頭的哦):
proxyTable: {
'/api': {
target:'http://22.2.2.22:8080/zhou', //這裏就是剛剛用api替換的url地址
changeOrigin: true,
withCredentials:true,
pathRewrite: {
'^/api': ''
}
}
然後調用啥的都不用改,只需要改着兩個位置就可解決跨域問題,如果多個後臺url都有跨域問題,那麼就在proxyTable多加幾個,做成列表就可以啦。