对接后端

This commit is contained in:
ovo 2024-12-07 22:09:27 +08:00
parent 6673f6eeea
commit 4671a6d390
1 changed files with 53 additions and 29 deletions

View File

@ -5,8 +5,8 @@ import router from '@/router'
// 创建 axios 实例 // 创建 axios 实例
const service: AxiosInstance = axios.create({ const service: AxiosInstance = axios.create({
baseURL: import.meta.env.VITE_API_BASE_URL || '/api', // 从环境变量获取API基础路径 baseURL: import.meta.env.VITE_API_BASE_URL || '/api',
timeout: 30000, // 请求超时时间 timeout: 30000,
headers: { headers: {
'Content-Type': 'application/json' 'Content-Type': 'application/json'
} }
@ -15,19 +15,17 @@ const service: AxiosInstance = axios.create({
// 请求拦截器 // 请求拦截器
service.interceptors.request.use( service.interceptors.request.use(
(config: AxiosRequestConfig) => { (config: AxiosRequestConfig) => {
// 从 localStorage 获取 token
const token = localStorage.getItem('token') const token = localStorage.getItem('token')
if (token) { if (token) {
config.headers = { config.headers = {
...config.headers, ...config.headers,
// Authorization: `Bearer ${token}` Authorization: token
} }
} }
return config return config
}, },
(error) => { (error) => {
console.error('请求错误:', error) console.error('请求拦截器错误:', error)
return Promise.reject(error) return Promise.reject(error)
} }
) )
@ -37,38 +35,64 @@ service.interceptors.response.use(
(response: AxiosResponse) => { (response: AxiosResponse) => {
const { code, message, data } = response.data const { code, message, data } = response.data
// 根据后端约定的状态码处理
if (code === 200) { if (code === 200) {
return data return data
} else { } else {
// 处理业务错误
const error = new Error(message || '请求失败') as any
error.code = code
error.data = data
ElMessage.error(message || '请求失败') ElMessage.error(message || '请求失败')
return Promise.reject(new Error(message || '请求失败')) return Promise.reject(error)
} }
}, },
(error) => { (error) => {
console.log(error.response) //undefined // 网络错误、超时等
const { status } = error.response || {} if (error.code === 'ECONNABORTED' || error.message.includes('timeout')) {
ElMessage.error('请求超时')
// 处理常见错误 return Promise.reject(new Error('请求超时'))
switch (status) {
case 401:
ElMessage.error('登录已过期,请重新登录')
localStorage.removeItem('token')
router.push('/login')
break
case 403:
ElMessage.error('没有权限访问')
break
case 404:
ElMessage.error('请求的资源不存在')
break
case 500:
ElMessage.error('服务器错误')
break
default:
ElMessage.error('网络错误')
} }
// 处理 HTTP 错误
if (error.response) {
const { status } = error.response
switch (status) {
case 400:
ElMessage.error('请求参数错误')
break
case 401:
ElMessage.error('未登录或登录已过期')
localStorage.removeItem('token')
router.push('/login')
break
case 403:
ElMessage.error('没有权限访问')
break
case 404:
ElMessage.error('请求的资源不存在')
break
case 500:
ElMessage.error('服务器错误')
break
default:
ElMessage.error(`请求失败: ${status}`)
}
} else if (error.request) {
// 请求已发出但没有收到响应
ElMessage.error('服务器无响应')
} else {
// 请求配置出错
ElMessage.error('请求配置错误')
}
// 打印详细错误信息以便调试
console.error('请求错误详情:', {
error,
response: error.response,
request: error.request,
config: error.config
})
return Promise.reject(error) return Promise.reject(error)
} }
) )