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.ts
import 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.在组件中使用

<script setup>
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);}
};
</script>