vue axios 封装请求 遇到一个问题
当我页面访问出错的时候 我想获取后天返回的错误信息 获取不到
这是我封装的
import axios from 'axios'
// import store from '@/store'
import { Notify, Toast } from 'vant'
const service = axios.create({
baseURL: process.env.VUE_APP_BASE_URL,
timeout: process.env.VUE_APP_TIME_OUT
})
let isPrompt = false
service.interceptors.request.use(config => {
// 防止 重复请求
console.log(config.url)
// 自定义请求头
// if (store.state.token) {
// }
return config
}, error => {
return Promise.reject(error)
})
service.interceptors.response.use(response => {
console.log(response)
if (response.status === 200 && response.data.code === 200) {
return response.data
} else {
Notify({ type: 'warning', message: response.msg, duration: 3000 })
}
return response
}, error => {
console.log(error)
if (error && error.response) {
switch (error.response.status) {
case 400:
error.message = '错误请求'
break
case 401:
error.message = '未授权,请重新登录'
break
case 403:
error.message = '拒绝访问'
break
case 404:
error.message = '请求错误,未找到该资源'
break
case 405:
error.message = '请求方法未允许'
break
case 500:
error.message = '服务器出错'
break
case 501:
error.message = '网络未实现'
break
default:
error.message = `连接错误${error.response.status}`
}
} else {
error.message = '网络出现问题,请稍后在试'
}
if (!isPrompt) {
isPrompt = true
const toast = Toast.loading({
forbidClick: true,
message: error.message
})
setTimeout(() => {
toast.clear()
isPrompt = false
}, 3000)
}
return Promise.resolve(error)
})
export default service
问题出现的环境背景及自己尝试过哪些方法
相关代码
粘贴代码文本(请勿用截图)
你期待的结果是什么?实际看到的错误信息又是什么?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(3)
你现在接口返回code=400的时候,其实error.response.status=200,response并不会走error
error已经进去你的劫持函数那里了,控制台输出了。没有提示的话,我猜测是你的toast那里有问题了,你可以断点看下就知道了。
截图里面的 code:400 只是业务code,不是http状态码;
在Headers里面找下status code, 如果是2xx, 应该走到成功的回调里面了,不是就走失败回调