描述
vite + axios
页面修改代码后, vite进行热更新, 当onMounted中进行了http请求, 请求时报错
原因
封装axios时, 设置响应拦截器, 当返回了res.data时, 下一次热更新时, 进入响应拦截器的对象就是res.data对象, 而非res对象
ty
axios.interceptors.response.use(
(res: AxiosResponse<any, any>) => {
return new Promise((resolve, reject) => {
// 状态码判断....
return resolve(res)
// return resolve(res.data) // 返回res.data会导致热更新后接口请求报错
})
},
(error) => {
console.error('>>> response error', error)
// 响应码判断....
return Promise.reject(error)
}
)
解决
axios响应拦截器中直接返还res对象
在调用api函数后就需要多一层解析过程
可以再封装一个请求对象, 函数中返还res.data, 示例:
const http = {
get(url, params) {
return new Promise((resolve, reject) => {
NProgress.start()
axios
.get(url, { params })
.then((res) => {
NProgress.done()
resolve(res.data)
})
.catch((err) => {
NProgress.done()
reject(err)
})
})
},
post(url, params) {
return new Promise((resolve, reject) => {
NProgress.start()
axios
.post(url, params)
.then((res) => {
NProgress.done()
resolve(res.data)
})
.catch((err) => {
NProgress.done()
reject(err)
})
})
},
put(url, params, removeId = true) {
// 移除params中的ID字段
if (removeId && params.id) {
params.id = undefined
}
return new Promise((resolve, reject) => {
NProgress.start() // 进度条插件, 可以删除
axios
.put(url, params)
.then((res) => {
NProgress.done()
resolve(res.data)
})
.catch((err) => {
NProgress.done()
reject(err)
})
})
},
delete(url) {
return new Promise((resolve, reject) => {
NProgress.start()
axios
.delete(url)
.then((res) => {
NProgress.done()
resolve(res.data)
})
.catch((err) => {
NProgress.done()
reject(err)
})
})
},
}
// 使用
const api = {
// 登录
login: (params) => http.post('/api/v1/base/login', params),
}
api.login({...参数}).then((resData) => {})