接口请求

这里说明管理端如何组织 API、封装请求、处理 Token 和统一响应。接后端前建议先看 环境配置 和 API 契约。

先看什么？

你要做什么	推荐章节
看请求封装入口	Axios 封装
新增业务 API	API 管理
理解 Token 注入	请求拦截器
理解响应格式	响应拦截器
看页面调用方式	使用示例

Axios 封装

项目使用 Axios 进行 HTTP 请求，已在 src/utils/request.ts 中封装。

基本用法

import request from "@/utils/request";

// GET 请求
export function getUserList(params) {
  return request({
    url: "/api/v1/users",
    method: "get",
    params,
  });
}

// POST 请求
export function addUser(data) {
  return request({
    url: "/api/v1/users",
    method: "post",
    data,
  });
}

请求拦截器

自动添加 Token：

request.interceptors.request.use((config) => {
  const token = getToken();
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
});

响应拦截器

统一处理响应：

request.interceptors.response.use((response) => {
  const { code, data, msg } = response.data;
  if (code === "00000") {
    return data;
  } else {
    ElMessage.error(msg);
    return Promise.reject(new Error(msg));
  }
});

API 管理

在 src/api 目录按模块管理：

api/
├── system/
│   ├── user.ts
│   ├── role.ts
│   └── menu.ts
└── ...

使用示例

<script setup lang="ts">
import UserAPI from "@/api/system/user";

const loading = ref(false);
const userList = ref([]);

async function fetchUsers() {
  loading.value = true;
  try {
    const data = await UserAPI.getUserList({ pageNum: 1 });
    userList.value = data.list;
  } catch (error) {
    console.error(error);
  } finally {
    loading.value = false;
  }
}

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

相关链接

• 环境配置
• Mock 数据
• API 契约