Vue 响应拦截器

在 Vue 应用中，使用拦截器能够捕获和处理 HTTP 请求的响应。

为什么使用响应拦截器

1. 统一处理错误：通过拦截器，可以在应用的不同部分统一处理错误，减少重复代码。
2. 简化代码：拦截器允许在请求和响应发生前后进行处理，从而简化了组件中的复杂逻辑。

实现 Vue 中的响应拦截器

第一步：安装axios

安装 Axios，用于发出 HTTP 请求。

npm install axios

第二步：创建拦截器

// 引入axios
import axios from 'axios';

// 创建axios实例
const axiosInstance = axios.create({
  baseURL: 'https://api.example.com',
});

// 响应拦截器
axiosInstance.interceptors.response.use(
  (response) => {
    return response;
  },
  (error) => {
    if (error.response) {
      // 处理 HTTP 错误状态码
      if (error.response.status === 401) {
        // 处理未授权的情况
        // 可以重定向到登录页或者执行其他操作
      } else if (error.response.status === 404) {
        // 处理资源未找到的情况
        // 提供用户友好的提示信息
      } else {
        // 其他错误情况
        // 提示用户出现了问题
      }
    } else if (error.request) {
      // 处理请求未发出的情况
      // 比如网络问题
    } else {
      // 处理其他错误
    }
    return Promise.reject(error);
  }
);

export default axiosInstance;

应用响应拦截器

在 Vue 项目中，引入创建的 Axios 实例并在需要发送请求的地方使用：

// 引入axios实例
import axios from './axiosInstance';

// 发起请求
axios.get('/data')
  .then(response => {
    // 处理请求成功的情况
  })
  .catch(error => {
    // 捕获响应拦截器中的错误信息
  });