Vue 项目中Axios配置不同的baseURL,请求不同的域名接口
最近使用 Vue2.0开发项目,开发过程遇到一个问题,由于项目需要拆分成多个小的模块,接口地址来源不一致。每个模块有不同的接口地址。而模块之间公用的接口就出现在同一项目请求多个接口地址问题。于是在网上看了问题解决办法,都不太实用,所以在这里记录一下我的解决办法,各个项目差异性导致每个项目有不同间距办法,这里的办法经供参考,欢迎多多留言,一起成长。。。。。。Vue2.0 项目中Axios配置不同的b
·
最近使用 Vue2.0开发项目,开发过程遇到一个问题,由于项目需要拆分成多个小的模块,接口地址来源不一致。每个模块有不同的接口地址。而模块之间公用的接口就出现在同一项目请求多个接口地址问题。于是在网上看了问题解决办法,都不太实用,所以在这里记录一下我的解决办法,各个项目差异性导致每个项目有不同间距办法,这里的办法经供参考,欢迎多多留言,一起成长。。。。。。
Vue2.0 项目中Axios配置不同的baseURL,请求不同的域名接口
准备工作1, 准备一个utls.js 文件(路径自己存放,我放到@/config/api中)
// 导出 对应的不同接口的URL地址
const configUrl = {
Base_store_URL: 'http://store.xxx.com', //模块一接口地址
Base_api2_URL: 'http://api.xxx.com', //模块二接口地址
}
export default configUrl
准备工作2,准备一个公用的request.js文件,并导入的apiUrl.js接口路径文件中(import request from ‘@/utils/request’)
import axios from 'axios'
import $store from '@/store'
import router from '../router'
import baseUrl from '@/config/api'
//const baseUrl = 'http://api2.65ph.com'
// const instance = axios.create({
// // baseURL: 'http://api2.test.com',
// timeout: 5000,
// // withCredentials:true
// })
const defaultOpt = { login: true }
let that = this
function baseRequest (options) {
let instance = '';
if(!options) return false
switch(options.urlType){
case 'api':
instance = axios.create({
baseURL: baseUrl.Base_store_URL,
timeout: 5000,
withCredentials:true
})
break;
default:
instance = axios.create({
baseURL: baseUrl.Base_api2_URL,
timeout: 5000,
withCredentials:true
})
}
axios.defaults.withCredentials = true
const token = $store.state.app.token
// console.log(token)
const headers = options.headers || {}
headers['Authorization'] = token
// headers["Authori-zation"] = "Bearer" + token
options.headers = headers
// 判断未登录
if (options.login && !token) {
// qudengl
toLogin()
return Promise.reject({ msg: '未登录', toLogin: true })
}
// console.log(options)
return instance(options).then(res => {
const data = res.data || {}
if (res.status !== 200)
return Promise.reject({ msg: "请求失败", res, data })
if ([410000, 410001, 410002].indexOf(data.status) !== -1) {
// 去登录
toLogin()
return Promise.reject({ msg: res.data.msg, res, data, toLogin: true })
}else if (data.status === 200) {
return Promise.resolve(data, res)
} else {
return Promise.reject({ msg: res.data.msg, res, data })
}
})
}
/**
* http 请求基础类
* 参考文档 https://www.kancloud.cn/yunye/axios/234845
*
*/
const request = ["post", "put", "patch"].reduce((request, method) => {
/**
*
* @param url string 接口地址
* @param data object get参数
* @param options object axios 配置项
* @param urlType object axios 请求接口路径域名区分
* @returns {AxiosPromise}
*/
request[method] = (url, data = {}, options = {},urlType) => {
return baseRequest(
Object.assign({ url, data, method ,urlType}, defaultOpt, options)
);
};
return request;
}, {});
["get", "delete", "head"].forEach(method => {
/**
*
* @param url string 接口地址
* @param params object get参数
* @param options object axios 配置项
* @param urlType object axios 请求接口路径域名区分
* @returns {AxiosPromise}
*/
request[method] = (url, params = {}, options = {}, urlType) => {
return baseRequest(
Object.assign({ url, params, method, urlType }, defaultOpt, options)
);
};
});
export default request
在接口文件中这样传参
import request from '@/utils/request'
export function getZbData (page) {
return request.get('index/zbxm', {page: page}, { login: false })
}
/**
* 文章列表
* @returns {*}
* api 我们判断模块的参数
*/
export function getArticleList(q, cid) {
return request.get("/api/article/list/" + cid, q, { login: false },'api');
}
我们调用接口时这样使用
import { getArticleList} from '@/api/public'
// 在methods中
// 文章列表
get_article_list(){
let that = this
let q = {
page: that.page,
limit: that.limit
};
getArticleList(q,that.cid).then(res=>{
that.$set(that,'articleList',res.data)
})
},
Vue3.0 项目中Axios配置不同的baseURL,请求不同的域名接口
其他地方都和上述相同,只要
准备工作2,准备一个公用的request.js文件中的用法有差异
import axios from 'axios'
import { Message } from 'iview'
import { getCookies, removeCookies } from '@/libs/util'
import Setting from '@/setting'
import {toLogin} from './login'
import baseUrl from '@/config/api'
const service = axios.create({
// baseURL: Setting.apiBaseURL,
timeout: 10000, // 请求超时时间
// withCredentials:true
})
// 请求拦截器
service.interceptors.request.use(
config => {
// console.log(config)
// console.log('============================')
switch(config.urlType){
case 'api':
config.url = baseUrl.Base_store_URL + config.url
break;
default:
config.url = baseUrl.Base_api2_URL + config.url
}
const token = getCookies('login_status')
if (token) {
// config.headers['Authori-zation'] = token
config.headers['Authorization'] = token
}
console.log(config)
return config
},
error => {
// do something with request error
return Promise.reject(error)
}
)
axios.defaults.withCredentials = true// 携带cookie
// response interceptor
service.interceptors.response.use(
response => {
let status = response.data ? response.data.status : 0
const code = status
console.log('状态',code)
switch (code) {
case 200:
return response.data
case 400:case 400011:case 400012:
return Promise.reject(response.data || { msg: '未知错误' })
case 410000:
case 410001:
case 410002:
toLogin()
break
default:
break
}
},
error => {
Message.error(error.msg)
return Promise.reject(error)
}
)
export default service
使用时
/**
* 文章详情
* @returns {*}
*/
export function getarticle(id) {
return request({
url: '/api/article/details/' + id,
method: 'get',
params: '',
urlType: 'api'
})
// return request.get("/api/article/details/" + id, {}, { login: false },'api');
}
总结
优点:
1,在不同的组件调用不同的方法就可以实现,不同的接口请求数据;
2,维护接口方便,以后上线之后,把api.js中的接口全部更换成线上接口即可;
更多推荐
已为社区贡献3条内容
所有评论(0)