请求拦截器 请求响应器

在使用像 Vue、React 等前端框架进行开发时，我们通常会使用一些类似于 axios、request 等库来进行网络请求。这些库通常都具有拦截器（interceptor）的功能，用于在请求发送前和响应返回后拦截、修改请求或响应的一些相关参数或数据。下面让我们简单介绍一下请求拦截器和响应拦截器的使用方法。

请求拦截器

请求拦截器可以在请求发送前对请求进行拦截，并进行一些统一的处理或修改操作，比如向请求头部添加 token、添加请求超时时间等。在 axios 中，我们可以使用 axios.interceptors.request.use 方法添加拦截器。下面是一个示例：

import axios from 'axios';

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
  // 添加 token
  config.headers['Authorization'] = 'Bearer ' + localStorage.getItem('token');
  // 添加超时时间
  config.timeout = 10000;
  return config;
}, function (error) {
  // 请求错误时进行处理
  return Promise.reject(error);
});

在上面的代码中，我们通过调用 axios.interceptors.request.use 方法添加了一个请求拦截器。这个请求拦截器会在请求发送前，往请求头添加一个 Authorization 字段，该字段的值为从 localStorage 中获取到的 token，同时在 config 对象中添加了一个 timeout 字段，该字段对应的值表示请求的超时时间为 10000 毫秒。

响应拦截器

响应拦截器可以在请求响应返回后对响应进行拦截，并进行一些统一的处理或修改操作，比如判断 token 是否过期、捕获后端异常等。在 axios 中，我们可以使用 axios.interceptors.response.use 方法添加拦截器。下面是一个示例：

import axios from 'axios';

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
  // 判断 token 是否过期并进行处理
  if (response.data.code === 401) {
    // 跳转到登录页面
    window.location.href = '/login';
  }
  // 捕获后端异常并进行处理
  if (response.data.code !== 0) {
    // 弹出错误提示框等
    console.error(response.data.msg);
  }
  return response;
}, function (error) {
  // 对响应的错误进行处理
  return Promise.reject(error);
});

在上面的代码中，我们通过调用 axios.interceptors.response.use 方法添加了一个响应拦截器。这个响应拦截器会在请求返回后，判断返回的状态码是否为 401，如果是则跳转到登录页面；同时还会捕获后端的异常信息，如果返回的状态码不为 0，则弹出一个错误提示框等。