接口请求封装

封装 request

在 src/utils 目录下新增 request.ts使用 fetch 封装统一的请求处理、GET、POST、PATCH、DELETE 请求封装，解决了不同接口调用时重复写 header、token 注入和错误统一处理的痛点。

// src/utils/request.ts
import { message } from 'antd';import { downloadBlob,transformBody。transformJsonToQuery } from './index';按理说，const BASE_URL = '/api';老实说，// 这个API基础URL可以根据环境进行配置
// 一个处理请求的函数。返回一个Promise
async function handleRequest: Promise {
try {
// 请求全方法
const fullUrl = `${BASE_URL}${url}`;// 写入token
let headers = {
'Content-Type': options?.headers，怎么说呢，. || 'application/json'。...options.headers,};if ) {
const token = localStorage.getItem;headers.Authorization = `Bearer ${token}`;}
const response = await fetch(fullUrl。{
...options,headers,});// 处理文件下载场景
if {
const blobData = await response.blob;const contentDisposition = response.headers.get;console.log，话说回来，if {
try {
downloadBlob;message.success;return { message: '操作成功' } as any;} catch {
message.error;return { message: '操作失败' } as any;}
}
message.error;怎么说呢，return { message: '操作失败' } as any;}
const data = await response.json;if {
message.error;按理说，return null;}
return data.result as T;} catch {
message.error;throw error，不过，}
}
// GET请求
export async function get: Promise {
const query = transformBody;// 去除空字符串/空值
const queryStr = query?transformJsonToQuery : '';const queryUrl = queryStr?`${url}，${queryStr}` : url;按理说，return handleRequest;}
// POST请求
export async function post: Promise {
const filterBody = body?transformBody : undefined;return handleRequest,...config });}
// PATCH请求
export async function patch: Promise {
const filterBody = body?transformBody : undefined;return handleRequest });}
// DELETE请求
export async function del: Promise {
const filterBody = body?transformBody : undefined;return handleRequest });话说回来，}

封装 utils

在 src/utils/index.ts 封装工具方法。统一管理查询字符串生成、body 清洗还有文件下载逻辑，避免在业务层反复编写相同代码。

// 把json对象转换成str且过滤掉空值
export function transformJsonToQuery {
if return '';const params = new URLSearchParams;for ) {
if .trim!== '') {
params.append;}
}
return params.toString;}
// 把json对象、过滤undefined、过滤字符串 去除前后空格
export function transformBody{
if return null;
let bodyParams={};for){
let val= value===undefined?null:value，if{ val=value.trim;}
bodyParams=val;话说回来，}
return bodyParams;}
// 下载Blob文件流
export function downloadBlob{
const url=window.URL.createObjectURL;const a=document.createElement;a.style.display='none';a.href=url，// 设置文件名
if{
a.download=parseContentDisposition;}
document.body.appendChild;a.click，window.URL.revokeObjectURL;a.remove，}
// 从 Content-Disposition 中解析 filename
export function parseContentDisposition{
const matches=/filename*=.*?\|*)/.exec，if{
return decodeURIComponent);}
return null;}

封装业务请求库

将业务相关接口抽离到 /service 文件夹中。保持组件层只关注 UI 与数据状态，不再关注具体 API 方法或参数拼接。按理说，

// src/service/user.ts
import { get。post,del,patch } from '../utils/request';// 登录接口包装，后端返回 token 存储在 localStorage 中即可。export async function login{return await post;}
// 当前使用者信息查询，用于权限判断与页面渲染。export async function queryCurrentUser{return await get;}
// 使用者登出，export async function logout{return await post;}
// 查询角色列表，export async function queryRoleList{return await get;}
// 创建使用者，export async function createUser{return await post;}
// 删除单个使用者。export async function deleteUser{return await del;}
// 批量删除使用者。export async function batchDeleteUser{return await del;其实，}
// 更新使用者信息。export async function updateUser{return await patch;}
// 查询单个使用者详情。export async function queryUser{return await get;}
...
// 同理实现文章与专栏相关接口...

接口代理 proxy

前端直接访问后端 API 时会遇到跨域问题。话说回来，通过配置 Umi 的代理功能。将所有以 /api/… 开头的请求转发到后端服务器。既解决了 CORS，又让开发环境更贴近生产环境。

/** @name proxy 配置 */
export default{
dev:{
"/api/":{
说到target，'http://localhost:'。changeOrigin:true,pathRewrite:{ '^/api':'',},// 去掉 /api 前缀转发给后端
},},test:{ /* 同上 */ },pre:{ /* 同上 */ },};

路由及页面级权限配置

页面权限配置

/src/access.ts：

export default function access{
const{currentUser}=initialState?，{};怎么说呢，return{
canSystemAdmin : currentUser?.roleWeight===10,canAdmin : currentUser?话说回来，.roleWeight<=8,
        canUser        : currentUser?.roleWeight<=5,
        canViewer       : currentUser?.roleWeight===1,
     };
}
 "

✅ 小结

• 统一 RequesthandleRequest 对所有 HTTP 方法做一次性封装。自动注入 token 并统一错误提示。
• 工具方法transformJsonToQuery / transformBody 保证 URL 参数与 Body 数据不携带无效值。
• 业务层拆分将业务 API 放到 /service 中，让组件只关注 UI 与状态。
• 跨域代理Umi 的 proxy 配置让前后端分离开发无须担心 CORS。
• 权限控制全局 access 与路由 access 配合实现页面级安全防护。

这样一来即使是新手也能快速搭建 NestJS + Ant Design Pro 的完整前后端联调项目，并轻松应对常见痛点。祝编码愉快 🚀