vue——request.js封装——多个baseUrl的处理_vue项目baseurl多个不同api地址

场景

前一段时间在写后台管理系统时，遇到一个问题：就是请求的时候有多个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
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179

多个接口的使用——不同请求地址的接口调用方法

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);
}
1
2
3
4
5
6
7
8
9
10
11