axios统一封装规范管理

新建/api/

1.新建统一处理文件/api/axios.ts

import axios from \"axios\"const http = axios.create({ baseURL: import.meta.env.VITE_API_BASE_URL, // 从环境变量读取 timeout: 10000,});// 请求拦截器（如添加 Token）http.interceptors.request.use((config) => { const token = localStorage.getItem(\"token\"); if (token) { config.headers.Authorization = `Bearer ${token}`; } return config;});// 响应拦截器（统一处理错误和返回数据）http.interceptors.response.use( (response) => { // 如果后端返回 { code, data, message } 格式 if (response.data.code !== 200) { return Promise.reject(response.data.message); // 业务错误 } return response.data.data; // 直接返回有效数据 }, (error) => { // HTTP 错误（如 401、404、500） const errorMessage = error.response?.data?.message || error.message; console.error(\"API Error:\", errorMessage); return Promise.reject(errorMessage); });export default http;

2.其他api：/api/user.ts

// src/api/user.tsimport http from \"./axios\";export const login = (data: { username: string; password: string }) => { return http.post(\"/auth/login\", data);};export const getUserInfo = (userId: number) => { return http.get(`/user/${userId}`);};

import http from \"./axios\";export const getProductList = (params: { page: number; size: number }) => { return http.get(\"/products\", { params });};

3.在组件中使用

import { getUserInfo } from \"@/api/user\";import { getProductList } from \"@/api/product\";const fetchData = async () => { try { const user = await getUserInfo(1); const products = await getProductList({ page: 1, size: 10 }); } catch (error) { console.error(\"请求失败:\", error); }};