首页 > 编程知识 正文

vue-axios使用,axios的拦截器怎么实现的

时间:2023-05-05 23:33:22 阅读:233941 作者:1889

预期目标:解决请求任意接口之前进行统一拦截判断,看是否返回500或404等错误并在页面给出错误提示。

一、刚开始看官方文档,如下:

     

备注:将代码加到页面中发现并未起作用,百度谷歌搜索一番,发现都是千篇一律,不同之处可能就是对返回状态码的处理不一样,并未解决拦截器不起作用的问题。在这期间也尝试了将拦截器单独提出来写出一个http.js然后再将其挂载到vue的原型上,还是不能解决问题。

二、尝试配置全局的baseURL,代码如下:

备注:可以进入拦截器并作出响应,解决了拦截器不起作用的问题,但是这样写又存在另外一个问题,因为我们整个项目的接口配置采用的是创建axios实例的方式,难以实现对每个接口固定ip进行统一配置的操作,如果改动代码的话较为麻烦。

结果:虽然可以拦截,但无法拦截每一个接口的请求,只是拦截了全局配置baseURL

三、为自己创建的axios实例添加拦截器,解决问题

备注:也就是说,官方文档上的axios.interceptors写法,针对的是全局的baseURL,而我们之前没有配置全局的baseURL,一开始检测不到就老是报错,结果配置了全局的好了但是达不到我们的使用要求。

结果:如果说,你采用的是创建实例的方法进行整个api接口的配置管理,那就要用实例名称点interceptors的方式去添加拦截器,而不是axios.interceptors

四、如果想要在响应里面做路由跳转,则需要引入路由配置文件

weixin@zdkeep免费获取各种学习资料面试题及电子书籍,免费进群学习成长技术交流职位内推项目外包等。

版权声明:该文观点仅代表作者本人。处理文章:请发送邮件至 三1五14八八95#扣扣.com 举报,一经查实,本站将立刻删除。