vue的axios拦截器使用

最新推荐文章于 2025-05-26 19:37:55 发布

原创最新推荐文章于 2025-05-26 19:37:55 发布 · 611 阅读

2 ·

CC 4.0 BY-SA版权

vue 专栏收录该内容

35 篇文章

订阅专栏

下载并使用axios后可进行全局拦截器设置，拦截器能在请求前或响应返回时做特殊处理。介绍了添加请求、响应拦截器，移除拦截器，为axios实例添加拦截器等操作，还给出某函数不受全局拦截器影响的解决办法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

axios拦截器

下载并使用axios后可以对全局进行拦截器设置。拦截器在发送请求前或响应返回时做一些特殊的处理。

下面是一个为axios添加请求loading的例子：

添加请求拦截器

//定义一个请求拦截器
axios.interceptors.request.use(function(config){
  Vue.$vux.loading.show(); //在请求发出之前进行一些操作
  return config
},function (error) {
  　　// 对请求错误做些什么
  // return Promise.reject(error)
});

添加响应拦截器

//定义一个响应拦截器
axios.interceptors.response.use(function(config){
  Vue.$vux.loading.hide();;//在这里对返回的数据进行处理
  return config
},function (error) {
  　　// 对请求错误做些什么
  // return Promise.reject(error)
});

移除拦截器

var myInterceptor = axios.interceptors.request.use(function () {/*...*/});
axios.interceptors.request.eject(myInterceptor);

为axios实例添加拦截器

var instance = axios.create();
instance.interceptors.request.use(function () {/*...*/});

某一个函数不希望受到全局拦截器的影响

解决方法：在函数内从新添加一个拦截器
如下：为请求函数添加一个新的拦截器使之不受全局拦截器影响

const $ajax = this.$http.create()

例：下面函数不受全局拦截器影响

pollopenid(){
      const $ajax = this.$http.create()
      $ajax({
        method:'post',
        url:'',
        data:{
          
        }
      }).then(res=>{
        
      })
    }