# Axios封装
TIP
此项目axios的封装方式较为简单，与常见的封装方式没有太大的区别，值得一提的是增加了多axios实例的支持
在一个较大的项目中，一套前端代码访问多套接口是很常见的事，最简单粗暴的做法就是封装多套axios，每一套axios对应一个baseURL，但这种方式无疑会产生重复代码，很不优雅，因此本项目对axios的封装进行了一点改造
// src/utils/http/index.js
import axios from 'axios'
import { setupInterceptor } from './interceptors'
function createAxios(option = {}) {
const defBaseURL = window.__APP__GLOB__CONF__?.VITE_APP_GLOB_BASE_API || import.meta.env.VITE_APP_GLOB_BASE_API
const service = axios.create({
timeout: option.timeout || 120000,
baseURL: option.baseURL || defBaseURL,
})
setupInterceptor(service)
return service
}
export const defAxios = createAxios()
export const testAxios = createAxios({
baseURL: window.__APP__GLOB__CONF__?.VITE_APP_GLOB_BASE_API_TEST || import.meta.env.VITE_APP_GLOB_BASE_API_TEST,
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
这样封装的话，想要多少个axios实例都可以直接修改文件添加方法，只需要传入对应的baseURL即可
# Mock服务
mock服务参考于Vben Admin (opens new window)，这里就偷个懒不赘述了