在Vue3中封装Axios的推荐方案及常见问题解决方案

推荐封装方案

1. 创建Axios实例

import axios, {
   
    AxiosRequestConfig, AxiosResponse } from 'axios';

const service = axios.create({
   
   
  baseURL: import.meta.env.VITE_API_BASE_URL, // 环境变量配置
  timeout: 10000,
  headers: {
   
    'Content-Type': 'application/json' }
});

2. 请求拦截器（Token、Loading）

let loadingCount = 0; // Loading计数器

service.interceptors.request.use((config: AxiosRequestConfig) => {
   
   
  // 添加Token
  const token = store.state.token; // 假设使用Pinia/Vuex
  if (token) config.headers!.Authorization = `Bearer ${
     
     token}`;

  // 控制Loading显示
  if (config.showLoading) {
   
   
    loadingCount++;
    showLoading(); // 自定义Loading显示逻辑
  }

  return config;
});

3. 响应拦截器（错误处理、Token过期）

service.interceptors.response.use(
  (response: AxiosResponse) => {
   
   
    // 关闭Loading
    if (response.config.showLoading) {
   
   
      loadingCount--;
      if (loadingCount === 0) hideLoading();
    }

    // 处理业务错误码
    const {
   
    code, message, data } = response.data;
    if (code !== 200)