关于vue中axios拦截器的使用

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

一、刚开始看官方文档，如下：

     

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

二、尝试配置全局的baseURL，代码如下：

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

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

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

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

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

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

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