vue——request.js封装——多个baseUrl的处理
前一段时间在写后台管理系统时,遇到一个问题:就是请求的时候有多个baseUrl的情况,也就是说整个系统中,请求的接口地址是多个。我之前的处理方法,就是创建多个request.js,然后给每个request.js的baseUrl赋不同的值。这种方法是可以,但是太笨了,被人骂了……下面是正确的写法:axios.create({})的方式可以创建多个实例直接上代码:import axios from '
·
vue——request.js封装——多个baseUrl的处理
场景
前一段时间在写后台管理系统时,遇到一个问题:就是请求的时候有多个
baseUrl
的情况,也就是说整个系统中,请求的接口地址是多个。
我之前的处理方法,就是创建多个request.js
,然后给每个request.js
的baseUrl
赋不同的值。
这种方法是可以,但是太笨了,被人骂了……
下面是正确的写法:
axios.create({})
的方式可以创建多个实例
直接上代码:
import axios from 'axios'
import Cookie from 'js-cookie'
const BASE_URL = progress.env.VUE_APP_API_IDS //这是第一个baseurl
const BASE_URL_API = progress.env.VUE_APP_API_BASE_URL_API//这是第二个baseurl
//跨域认证信息header名
const xsrfHeaderName = 'Authorization'
const instance = axios.create({
timeout:50000,
baseURL:BASE_URL,
withCredentials:false,
xsrfHeaderName:xsrfHeaderName,
xsrfCookieName:xsrfHeaderName,
headers:{
"accept-language":"zh-Hans"
}
})
const instanceApi = axios.create({
timeout:50000,
baseURL:BASE_URL_API,
withCredeentials:false,
xsrfHeaderName:xsrfHeaderName,
srrfCookieName:xsrfCookieName,
headers:{
"accept-language":"zh-Hans"
}
})
//认证类型
const AUTH_TYPE = {
BEARER:'Bearer',
BASIC:'basic',
AUTH1:'auth1',
AUTH2:'auth2'
}
//http method
const METHOD = {
GET:'get',
POST:'post',
PUT:'put',
DELETE:'delete'
}
//axios请求
async function request(url,method,params,config){
switch(method){
case METHOD.GET:
return instance.get(url,{params,...config})
case METHOD.POST:
return instance.post(url,params,config)
case METHOD.PUT:
return instance.put(url,params,config)
case METHOD.DELETE:
return instance.delete(url,{params,...config})
default:
return instance.get(url,{params,...config})
}
}
async function requestApi(url,method,params,config){
switch(method){
case METHOD.GET:
return instanceApi.get(url,{params,...config})
case METHOD.POST:
return instanceApi.post(url,params,config)
case METHOD.PUT:
return instanceApi.put(url,params,config)
case MTHOD.DELETE:
return instanceApi.delete(url,{params,...config})
default:
return instanceApi.get(url,{params,...config})
}
}
//设置认证信息
function setAuthorization(auth,authType=AUTH_TYPE.BEARER){
switch(authType){
case AUTH_TYPE.BEARER:
Cookie.set(xsrfHeaderName,'Bearer '+auth.token,{expires:auth.expireAt})
break
case AUTH_TYPE.BASIC:
case AUTH_TYPE.AUTH1:
case AUTH_TYPE.AUTH2
default:
break
}
}
//移除认证信息
function removeAuthrization(authType=AUTH_TYPE.BEARER){
switch(authType){
case AUTH_TYPE.BEARER:
Cookie.remove(xsrfHeaderName)
break
case AUTH_TYPE.BASIC:
case AUTH_TYPE.AUTH1:
case AUTH_TYPE.AUTH2:
default:
break
}
}
//检查认证信息
function checkAuthorization(authType=AUTH_TYPE.BEARER){
swtich(authType){
case AUTH_TYPE.BEARER:
if(Cookie.get(xsrfHeaderName)){
return true
}
break
case AUTH_TYPE.BASIC:
case AUTH_TYPE:AUTH1:
case AUTH_TYPE.AUTH2:
default:
break;
}
return false
}
//加载拦截器
function loadInterceptors(interceptors,options){
const {request,responce} = interceptors
//加载请求拦截器
request.forEach(item=>{
let {onFulfilled,onRejected} = item;
if(!onFulfilled||typeof onFulfilled !== 'function'){
onFulfilled = config=>config
}
if(!onRejected||typeof onRejected !=='function'){
onRejected = error=>Promise.reject(error)
}
instance.interceptors.request.use(
config=>onFulfilled(config,options),
error=>onRejected(error,options)
)
instanceApi.interceptors.request.user(
config=>onFulfilled(config,options),
error=>onRejected(error,options)
)
})
//加载响应拦截器
response.forEach(item=>{
let {onFulfilled,onRejected} = item;
if(!onFulfilled||typeof onFulfilled !=='function'){
onFulfilled = response=>response
}
if(!onRejected||typeof onRejected !=='function'){
onRejected = error=>Promise.reject(error)
}
instance.interceptors.response.use(
response=>onFulfilled(response,options),
error=>onRejected(error,options)
)
instanceApi.interceptors.response.use(
response=>onFulfilled(response,options),
error=>onRejected(error,options)
)
})
}
//解析Url中的参数
function parseUrlParams(url){
const params = {};
if(!url||url===''||typeof url !=='string'){
return params
}
const paramsStr = url.split('?')[1];
if(!paramsStr){
return params
}
const paramsStr = paramsStr.replace(/&|=/g,' ').split(' ')
for(let i=0;i<paramsArr.length/2;i++){
const value = paramsArr[i*2+1]
params[paramsArr[i*2]] = value==='true'?true:(value==='false'?false:value)
}
return params
}
export {
METHOD,
AUTH_TYPE,
request,
requestApi,
setAuthorization,
removeAuthorization,
checkAuthorization,
loadInterceptors,
parseUrlParams
}
多个接口的使用——不同请求地址的接口调用方法
import {
request,
requestApi,
METHOD,
} from '@/utils/request';
export function getList(params) {
return request('/api/Project', METHOD.GET, params);
}
export function getCurrentInfo() {
return requestApi('/api/User', METHOD.GET);
}
更多推荐
已为社区贡献69条内容
所有评论(0)