如何封装和优化 Axios 请求：提升前端开发效率的最佳实践

import Axios from 'axios';
import router from './router'; // 导入项目中的路由

const publicFnAxios = {
  post: function (url, data = {}) {
    return new Promise((resolve, reject) => {
      data.api_version = data.api_version || ''; // 添加通用属性
      Axios.post(url, data)
        .then((res) => {
          this.handleResponse(res, resolve, reject);
        })
        .catch((error) => {
          reject(error);
        });
    });
  },

  get: function (url, params = {}) {
    return new Promise((resolve, reject) => {
      params.api_version = params.api_version || '';
      Axios.get(url, { params })
        .then((res) => {
          this.handleResponse(res, resolve, reject);
        })
        .catch((error) => {
          reject(error);
        });
    });
  },

  handleResponse: function (res, resolve, reject) {
    if (res.data.code === 1100) {
      sessionStorage.clear();
      router.replace({ path: '/' }); // 登录过期，跳转到登录页
    } else {
      resolve(res);
    }
  }
};

export default publicFnAxios;

实际使用场景

1. 登录过期处理： 在实际开发中，后端会设置一个登录有效期，前端需要检测用户的登录状态。如果用户的登录信息过期了，我们需要跳转回登录页，并清除本地存储中的过期数据。在上面的封装中，当后端返回 code=1100 时，我们通过 sessionStorage.clear() 清除存储并跳转到登录页。
2. 通用参数的添加： 许多 API 请求都需要发送一些通用的参数，如 API 版本、用户标识等。我们在封装的 post 和 get 方法中添加了 data.api_version，确保每次请求都携带这些通用信息。
3. 错误处理： 通过 catch 块捕获请求中的错误，我们可以集中处理错误信息，比如显示错误提示或记录日志。这可以避免每次请求都需要编写相同的错误处理逻辑。

进一步的优化建议

• 请求拦截器的使用： 通过 Axios 的请求拦截器，可以在每个请求发送之前自动添加 Authorization 头，减少代码冗余。比如：

Axios.interceptors.request.use(config => {
  const token = sessionStorage.getItem('token');
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
}, error => {
  return Promise.reject(error);
});

• 全局错误处理： 同样地，通过响应拦截器可以实现全局的错误处理。比如，当服务器返回 500 错误时，可以弹出通用的提示框，而不需要在每个请求中重复处理。
• 使用场景扩展： 封装的 Axios 方法不仅可以用于 Vue 项目，也适用于 React 或其他 JavaScript 框架。它的通用性使得你可以快速将其集成到各种前端项目中。