vue-resource 拦截器的使用

在vue项目中使用vue-resource调用接口的过程中,假设我们需要在任何一个页面调用http请求的时候,都在接口请求成功之前,出现一个loading,当接口有了响应,返回了response的时候,将loading隐藏。如果在页面每一个http请求的时候,都添加一次判断,那将造成代码冗余和重复工作量,有没有什么方法可以在请求每一次接口的时候,统一进行处理,然后再返回给每一个接口呢
vue-resourced的interceptors正是为这个而生的,在每次http的请求响应之后,如果设置了拦截器,会优先执行拦截器函数,获取响应体,然后才会决定是否把response返回给
then进行接收。
我们可以在这个拦截器里边添加对响应状态码的判断,来决定是跳转到登录页面还是留在当前页面继续获取数据。这个函数一般是在根组件里面进行注册,例如app.vue

一般的写法如下:

Vue.http.interceptors.push((request, next) => {
  // modify request
  request.method = 'POST';//在请求之前可以进行一些预处理和配置
  // continue to next interceptor
  //在响应之后传给then之前对response进行修改和逻辑判断。对于session已过期的判断,就添加在此处,页面中任何一次http请求都会先调用此处方法
  next((response) => {
        loading  =  false// loading隐藏,一般在vuex里控制
        if(response.status === 200) {
              ... //处理请求成功的逻辑
              return response // 必须返回,后面的接口的then,才能获取response
        }  else { 
            if (response.status >= 500) {
                // 错误处理
            } else if (response.status === 404) {
              ...
            }
            return reponse // 必须返回
        }
  });
});

你可能感兴趣的:(vue-resource 拦截器的使用)