Vue3,Axios 全局配置

ue 3 + Axios 配置及页面请求实现方案，包含 ​​全局配置​​、​​拦截器​​、​​TypeScript 支持​​ 和 ​​页面组件调用示例​​：

一、Axios 全局配置 (src/utils/request.ts)

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

// 定义响应数据结构
interface ResponseData<T = any> {
  code: number;
  message: string;
  data: T;
}

// 创建axios实例
const service: AxiosInstance = axios.create({
  baseURL: import.meta.env.VITE_API_BASE_URL, // 从.env文件读取
  timeout: 30000, // 30秒超时
  headers: {
    'Content-Type': 'application/json;charset=UTF-8'
  }
});

// 请求拦截器
service.interceptors.request.use(
  (config: AxiosRequestConfig) => {
    // 添加token（示例）
    const token = localStorage.getItem('token');
    if (token && config.headers) {
      config.headers.Authorization = `Bearer ${token}`;
    }
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);

// 响应拦截器
service.interceptors.response.use(
  (response: AxiosResponse<ResponseData>) => {
    // 统一处理业务逻辑
    if (response.data.code !== 200) {
      return Promise.reject(new Error(response.data.message || 'Error'));
    }
    return response.data; // 直接返回data字段
  },
  (error) => {
    // 处理HTTP错误状态码
    if (error.response) {
      switch (error.response.status) {
        case 401:
          // 跳转到登录页
          window.location.href = '/login';
          break;
        case 504:
          console.error('网关超时，请检查网络或联系管理员');
          break;
      }
    }
    return Promise.reject(error);
  }
);

export default service;

二、环境变量配置 (.env.development)

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import request from '@/utils/request';

// 定义接口数据类型
interface User {
  id: number;
  name: string;
  email: string;
}

const users = ref<User[]>([]);
const loading = ref(false);
const error = ref('');

// 获取用户列表
const fetchUsers = async () => {
  try {
    loading.value = true;
    const res = await request.get<ResponseData<User[]>>('/users');
    users.value = res.data; // 类型安全访问
  } catch (err: any) {
    error.value = err.message || '加载失败';
  } finally {
    loading.value = false;
  }
};

// 提交表单
const submitForm = async (formData: { name: string }) => {
  await request.post('/users', formData);
  fetchUsers(); // 重新加载数据
};

onMounted(() => {
  fetchUsers();
});
</script>

<template>
  <div class="user-management">
    <!-- 加载状态 -->
    <div v-if="loading">加载中...</div>
    
    <!-- 错误提示 -->
    <div v-if="error" class="error">{{ error }}</div>
    
    <!-- 用户列表 -->
    <ul v-else>
      <li v-for="user in users" :key="user.id">
        {{ user.name }} - {{ user.email }}
      </li>
    </ul>
    
    <!-- 添加用户表单 -->
    <form @submit.prevent="submitForm({ name: 'New User' })">
      <button type="submit">添加测试用户</button>
    </form>
  </div>
</template>

<style scoped>
.error {
  color: red;
}
</style>