Vue 拦截器：轻松处理 HTTP 请求和响应

Vue 拦截器是一种在 Vue 应用程序中对 HTTP 请求和响应进行拦截和处理的方法，可以在请求和响应被发送和接收之前或之后执行一些操作。拦截器可以用于实现诸如身份验证、错误处理和请求转换等功能。

在 Vue 中，可以使用 axios 库来发出 HTTP 请求，并使用其拦截器来处理请求和响应。可以使用 axios.interceptors.request.use() 方法来添加请求拦截器，使用 axios.interceptors.response.use() 方法来添加响应拦截器。

例如，下面的代码演示了如何添加一个请求拦截器，用于在每个请求中添加身份验证令牌：

import axios from 'axios';

axios.interceptors.request.use(config => {
  const token = localStorage.getItem('token');
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
});

此代码将在每个请求的头部添加一个 Authorization 字段，其中包含从本地存储中获取的身份验证令牌。

类似地，可以使用响应拦截器来处理响应，例如：

axios.interceptors.response.use(response => {
  // 处理响应数据
  return response;
}, error => {
  // 处理响应错误
  return Promise.reject(error);
});

这个响应拦截器将处理成功的响应，并在遇到错误时返回一个拒绝的 Promise。在拒绝 Promise 时，可以使用 error 参数来处理错误信息。