Vue添加请求拦截器及vue-resource 拦截器使用

当我们在Vue中使用vue-resource库进行接口请求时，我们可能需要为每个请求设置一些通用信息，比如token、请求头、请求体等，那么我们可以通过添加请求拦截器来实现这个过程。

添加请求拦截器

我们可以在Vue实例中添加一个request拦截器，这个拦截器会在每个请求发送前被触发执行，可以在这里对请求进行配置，如下：

import Vue from 'vue';
import VueResource from 'vue-resource';

Vue.use(VueResource);

Vue.http.interceptors.push(function (request, next) {
  // 在请求发送之前执行
  request.headers.set('Authorization', 'Bearer ' + localStorage.getItem('token'));

  // 进入下一个拦截器
  next();
});

在这个拦截器中，我们首先使用VueResource库中的headers方法，设置请求头信息。这里我们设置了一个Authorization字段，值为当前本地存储中的token值。

使用拦截器

当请求被拦截后，我们可以进行一些操作，比如读取请求体数据、修改请求头信息等。下面是一个使用拦截器的例子：

Vue.http.interceptors.push(function(request, next) {
  // 处理请求体数据
  request.body = JSON.stringify(request.body);

  // 进入下一个拦截器
  next(function(response) {
    // 处理响应数据
    return response.json();
  });
});

在这个例子中，在请求拦截器中我们使用了JSON.stringify()方法，将请求体数据转换成JSON字符串。在响应拦截器中，经过下一个拦截器处理后，我们使用response.json()方法将响应数据转换成JSON对象。

当然，这只是请求拦截器的简单使用方式，实际中可以根据具体需要进行更复杂地处理。

总结一下，Vue添加请求拦截器可以通过VueResource库中的interceptors来实现，在拦截器中，我们可以对请求进行配置和修改数据，而使用拦截器可以帮助我们处理响应数据，这些都是VueResource库在处理网络请求中极为重要的组成部分。