request.ts
4.4 KB
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
import axios, { type AxiosInstance, type AxiosRequestConfig, type AxiosResponse } from 'axios'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useUserStore } from '@/stores/modules/user'
import router from '@/router'
// 创建axios实例
const service: AxiosInstance = axios.create({
baseURL: import.meta.env.VITE_API_BASE_URL,
timeout: 10000,
headers: {
'Content-Type': 'application/json;charset=UTF-8'
}
})
console.log('Axios实例创建,baseURL:', import.meta.env.VITE_API_BASE_URL)
// 请求拦截器
service.interceptors.request.use(
(config: any) => {
console.log('请求拦截器 - 请求配置:', {
url: config.url,
baseURL: config.baseURL,
method: config.method,
params: config.params,
headers: config.headers
})
const userStore = useUserStore()
// 添加token到请求头
if (userStore.token) {
config.headers = config.headers || {}
config.headers['Authorization'] = `Bearer ${userStore.token}`
}
return config
},
(error) => {
console.error('请求错误:', error)
return Promise.reject(error)
}
)
// 响应拦截器
service.interceptors.response.use(
(response: AxiosResponse) => {
const { code, message, data } = response.data
// 请求成功
if (code === 200) {
return data
}
// 业务错误
ElMessage.error(message || '请求失败')
return Promise.reject(new Error(message || '请求失败'))
},
(error) => {
console.error('响应错误:', error)
let message = '网络错误'
if (error.response) {
const { status, data } = error.response
switch (status) {
case 401:
message = '未授权,请重新登录'
// 清除token并跳转到登录页
const userStore = useUserStore()
userStore.logout()
router.push('/login')
break
case 403:
message = '拒绝访问'
break
case 404:
message = '请求地址出错'
break
case 408:
message = '请求超时'
break
case 500:
message = '服务器内部错误'
break
case 501:
message = '服务未实现'
break
case 502:
message = '网关错误'
break
case 503:
message = '服务不可用'
break
case 504:
message = '网关超时'
break
case 505:
message = 'HTTP版本不受支持'
break
default:
message = data?.message || `连接错误${status}`
}
} else if (error.code === 'ECONNABORTED') {
message = '请求超时'
} else if (error.message.includes('Network Error')) {
message = '网络连接异常'
}
ElMessage.error(message)
return Promise.reject(error)
}
)
// 请求方法封装
export const request = {
get<T = any>(url: string, params?: any): Promise<T> {
console.log('Request GET:', url, params)
return service.get(url, { params })
},
post<T = any>(url: string, data?: any): Promise<T> {
return service.post(url, data)
},
put<T = any>(url: string, data?: any): Promise<T> {
return service.put(url, data)
},
delete<T = any>(url: string, params?: any): Promise<T> {
return service.delete(url, { params })
},
upload<T = any>(url: string, file: File, onProgress?: (progress: number) => void): Promise<T> {
const formData = new FormData()
formData.append('file', file)
return service.post(url, formData, {
headers: {
'Content-Type': 'multipart/form-data'
},
onUploadProgress: (progressEvent) => {
if (onProgress && progressEvent.total) {
const progress = Math.round((progressEvent.loaded * 100) / progressEvent.total)
onProgress(progress)
}
}
})
},
download(url: string, filename?: string): Promise<void> {
return service.get(url, {
responseType: 'blob'
}).then((response) => {
const blob = new Blob([response.data])
const downloadUrl = window.URL.createObjectURL(blob)
const link = document.createElement('a')
link.href = downloadUrl
link.download = filename || 'download'
document.body.appendChild(link)
link.click()
document.body.removeChild(link)
window.URL.revokeObjectURL(downloadUrl)
})
}
}
export default service