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);
}