简单的Axios 响应拦截封装，优化项目开发体验

当使用 Axios 进行后端接口请求时，我们可以封装 Axios 并进行请求拦截、响应拦截和错误处理，以便在整个项目中更方便地使用。今天我们来简要讲一下响应拦截

首先，我们需要在项目中安装 Axios 和 Vant（用于显示错误提示）：

npm install axios
npm install vant

接下来，创建一个名为 http.js 的文件，用于封装 Axios：

import axios from 'axios';
import router from '../router';
import { Toast } from 'vant';

// 设置 Axios 默认配置
axios.defaults.baseURL = 'xxxxxxxxx'; // 将url中相同的部分封装起来，可以在发送请求时自动将其添加到请求的 URL 前面，从而减少重复代码
axios.defaults.withCredentials = true; // 是否允许在请求头中携带凭证
axios.defaults.headers['token'] = 'xxxxxx';
axios.defaults.headers['Content-Type'] = 'application/json'; // 告诉后端，所有使用post发送的数据都是JSON对象

// 响应拦截器
axios.interceptors.response.use(
  response => {
    if (typeof response.data !== 'object') {
      Toast.fail('服务器返回数据错误');
      return Promise.reject(response); // 返回一个错误，之后可以通过.catch()来处理错误
    }
    if (response.data.resultCode !== 200) { // 逻辑性错误
      if (response.data.message) Toast.fail(response.data.message); // 显示错误信息
      if (response.data.resultCode === 416) { // 未登录且访问的页面需要登录
        router.push('/login'); // 跳转到登录页面
      }
    }
    return response.data;
  },
  error => { // 如果发生请求错误（例如网络错误）
    Toast.fail('请求出错');
    return Promise.reject(error);
  }
);

export default axios;

现在，我们可以在页面中直接引入这个封装好的 Axios，并发起接口请求：

import http from '../utils/http';

// 在需要使用接口的地方调用
http.get('/xxxxx')
  .then(response => {
    // 处理正常响应的逻辑
    console.log(response);
  })
  .catch(error => {
    // 处理错误逻辑
    console.error(error);
  });

当然，这里的接口请求我们也可以封装一下，比如同一个页面的接口请求都封装在一起，这样，我们就完成了基于 Axios 的接口请求封装和使用。通过这种方式，我们可以在项目中统一处理响应和错误。