新建/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>