axios统一封装规范管理

新建/api/

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

javascript 复制代码
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

javascript 复制代码
// 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}`);
};
javascript 复制代码
import http from "./axios";

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

3.在组件中使用

css 复制代码
<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>
相关推荐
Zuckjet_2 小时前
开启 3D 之旅 - 你的第一个 WebGL 三角形
前端·javascript·3d·webgl
2401_863801462 小时前
探索 12 种 3D 文件格式:综合指南
前端·3d
珍宝商店3 小时前
前端老旧项目全面性能优化指南与面试攻略
前端·面试·性能优化
bitbitDown3 小时前
四年前端分享给你的高效开发工具库
前端·javascript·vue.js
gnip4 小时前
实现AI对话光标跟随效果
前端·javascript
脑花儿5 小时前
ABAP SMW0下载Excel模板并填充&&剪切板方式粘贴
java·前端·数据库
lumi.6 小时前
Vue.js 从入门到实践1:环境搭建、数据绑定与条件渲染
前端·javascript·vue.js
二十雨辰6 小时前
vue核心原理实现
前端·javascript·vue.js
影子信息6 小时前
[Vue warn]: Error in mounted hook: “ReferenceError: Jessibuca is not defined“
前端·javascript·vue.js
BTU_YC6 小时前
FastAPI+Vue前后端分离架构指南
vue.js·架构·fastapi