Vue 3 项目中 Axios 的实践与优化

222200315张俊腾 2024-12-10 22:54:09

技术概述

在前端开发中，Axios作为轻量级且灵活的HTTP客户端工具，被广泛用于与后端API通信。当需要从服务端获取数据或提交数据时，我们常通过Axios发送GET、POST、PUT、DELETE等请求。项目中使用Axios的原因是其提供的请求和响应拦截器机制，有助于统一处理认证信息、错误处理和数据格式转换。难点在于在复杂系统中对请求流程进行全局化管理，如在发送请求前自动添加Token，在接收响应后统一处理错误状态，并对重复请求进行优化缓存。

技术详述

1. Axios全局实例与基础配置

在Vue 3项目中，我通过创建一个独立的axios.js文件来统一管理Axios实例：

设置基础URL与超时时间
配置全局请求头、超时与其他选项

import axios from 'axios';

const instance = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 5000
});

export default instance;

通过使用instance，项目中所有请求将使用同一配置，减少重复代码。

2. 请求拦截器与响应拦截器

请求拦截器（Request Interceptor）：在请求发送前注入Token等认证信息。
响应拦截器（Response Interceptor）：在接收到响应后统一处理错误，根据状态码（如401未授权）执行相应的逻辑，提升用户体验与安全性。

示例代码：

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

instance.interceptors.response.use(response => {
  return response.data;
}, error => {
  if (error.response) {
    const status = error.response.status;
    if (status === 401) {
      alert('登录状态已过期，请重新登录');
      window.location.href = '/login';
    } else {
      console.error('请求出错:', error.response.data);
    }
  } else {
    console.error('网络错误或服务器未响应');
  }
  return Promise.reject(error);
});

流程图（请求与响应处理）：

在这里插入图片描述

3. 参数与数据处理

在调用接口前，对请求参数进行校验和格式化；在接收到响应数据后，对数据进行转换和过滤，再返回给组件。

调用示例：

async getRescueInfo(userId) {
  try {
    const data = await instance.get(`/rescue-info/${userId}`);
    this.rescueData = data;
  } catch (err) {
    console.error('获取救援信息失败', err);
  }
}

4. 数据缓存与性能优化

对于不经常变化但频繁请求的数据（如排行榜信息），使用sessionStorage或内存进行缓存，下次请求时先检查缓存，减少对服务器的重复请求。

async getRankList() {
  const cached = sessionStorage.getItem('rankList');
  if (cached) {
    return JSON.parse(cached);
  }
  const data = await instance.get('/rescue-rank');
  sessionStorage.setItem('rankList', JSON.stringify(data));
  return data;
}

遇到的问题与解决过程

问题1：Token过期的重复提示

当Token过期时，所有请求返回401错误，导致用户反复看到错误弹窗。

解决方法：
在响应拦截器中添加标志位isRefreshing，当首次发现401时弹窗提示并跳转登录，后续401不再重复提示。

let isRefreshing = false;

instance.interceptors.response.use(response => response, error => {
  if (error.response && error.response.status === 401) {
    if (!isRefreshing) {
      isRefreshing = true;
      alert('登录已过期，请重新登录');
      window.location.href = '/login';
    }
  }
  return Promise.reject(error);
});

问题2：数据格式不匹配

后端返回的数据字段与前端期望不一致，导致前端渲染异常。

解决方法：
在响应拦截器中对数据进行格式转换，例如将user_id转换为userId。这样，前端组件就能使用统一的数据格式。

instance.interceptors.response.use(response => {
  return transformData(response.data);
}, error => {...});

function transformData(data) {
  return {
    userId: data.user_id,
    userName: data.user_name,
    // ...其他字段映射
  };
}

总结

通过对Axios进行全局实例化与拦截器配置，我在Vue 3项目中实现了统一的身份验证、错误处理和数据优化策略，大大提升了代码可读性和可维护性。针对实际问题（如Token过期、多次弹窗、数据格式不匹配、网络波动）所采取的解决方案，为后续更复杂的前后端交互提供了宝贵的经验。这些实践经验不仅丰富了我的技术储备，也让我在面对更为复杂的业务场景时更加从容。

参考资料：