首页教程软件教程正文

深入剖析Restful API前端接口模型架构

uncle 软件教程 2025年08月6日

0 收藏 0 点赞 668 浏览 5415 个字

摘要 :

文章目录一、前言二、useMutation实现三、Model的构建与使用四、Restful API介绍 4.1 统一接口 4.2 无状态 4.3 可缓存约束 4.4 分层 4.5 客户端-服务器分离五、R……

文
章
目
录

一、前言
二、useMutation实现
三、Model的构建与使用
四、Restful API介绍

4.1 统一接口
4.2 无状态
4.3 可缓存约束
4.4 分层
4.5 客户端-服务器分离

五、Restful API在前端模型层的优势

5.1 专注业务层逻辑
5.2 数据状态管理
5.3 统一的错误处理
5.4 解耦接口层与业务层

一、前言

之前在前公司接触到一种很有意思的权限校验接口组合方式，在当时的Vue项目里，所有权限校验接口都是在一个Model对象中，借助修饰器来实现的。我觉得挺有趣，就用React模拟了一下这个实现过程，下面就给大家详细讲讲。

二、useMutation实现

先给大家看看我模拟出来的React的useMutation钩子函数，这个钩子函数能让代码更好理解。它的代码在utils/useMutation.ts文件里，具体内容如下：

// utils/useMutation.ts

import { useState } from\'react\';

// 定义useMutation函数，接收一个包含url、method、variables的配置对象
export function useMutation&lt;T, P&gt;(options: {
url: string;
method: \'GET\' | \'POST\' | \'PUT\' | \'DELETE\';
variables: (params: T) =&gt; any;
}) {
// 定义loading状态，用于表示请求是否正在进行，初始值为false
const [loading, setLoading] = useState(false);
// 定义data状态，用于存储请求返回的数据，初始值为null
const [data, setData] = useState

(null);
// 定义error状态，用于存储请求过程中发生的错误，初始值为null
const [error, setError] = useState(null);

// 定义mutate函数，用于发起请求
const mutate = async (params: T) =&gt; {
// 请求开始，设置loading为true，清除之前的错误
setLoading(true);
setError(null);

// 根据传入的参数生成查询字符串
const queryParams = new URLSearchParams(options.variables(params)).toString();
// 根据请求方法拼接url，如果是GET请求，将查询字符串拼接到url后面
const url = options.method === \'GET\'? `${options.url}?${queryParams}` : options.url;

try {
// 发起fetch请求
const response = await fetch(url, {
method: options.method,
headers: {
\'Content-Type\': \'application/json\',
},
});
// 打印响应信息，方便调试
console.log(\'Response:\', response);

// 如果响应状态码表示成功
if (response.ok) {
// 解析响应数据为JSON格式，并存储到data状态中
const result = await response.json();
setData(result);
} else {
// 如果响应失败，抛出错误
throw new Error(\'Request failed\');
}
} catch (err) {
// 如果请求过程中发生错误，将错误信息存储到error状态中
setError(err);
} finally {
// 请求结束，设置loading为false
setLoading(false);
}
};

// 返回包含mutate函数、loading状态、data状态和error状态的对象
return { mutate, loading, data, error };
}

这里实现的useMutation其实是把从接口定义到函数实现的整个过程都整合到一起了。虽然这么做在一定程度上降低了结耦复用率，不过也让代码更集中处理权限校验接口相关的逻辑。

三、Model的构建与使用

接下来看看Model类，我们在这个类里使用useMutation来实现权限校验接口的装饰。代码如下：

import { useMutation } from \"../utils/useMutation\";

// 定义User数据类型，包含接口返回的各种信息
interface UserData {
result: number;
err_msg: string;
data: {
id: number; // 用户ID
dep: string; // 部门
Per: string; // 权限
};
}

// 定义List数据类型，包含接口返回的列表相关信息
interface ListData {
result: number;
err_msg: string;
data: Array&lt;{ id: number; name: string; dep: string; Per: string }&gt;;
}

// 定义Model类，在类的构造函数中初始化请求方法
export class Model {
// 初始化用户信息请求方法，传递参数id获取用户数据
user = useMutation&lt;{ id: number }, UserData&gt;({
url: \'http://localhost:3000/user\',
method: \'GET\',
variables: (p) =&gt; ({ id: p.id }),
});

// 初始化列表信息请求方法，传递分页参数获取列表数据
list = useMutation&lt;{ page: number, size: number }, ListData&gt;({
url: \'http://localhost:3000/list\',
method: \'GET\',
variables: (p) =&gt; ({ page: p.page, size: p.size }),
});
}

在这个Model类里，我们挂载了user和list两个属性，分别对应获取用户信息和列表信息的接口。部分类型定义可通通忽略，这里我便在Model身上去挂载了这些属性，打印看看。不过，刚定义完的时候，这些属性里的数据都是空的，因为接口还没有真正发起请求，在浏览器的network面板里也看不到请求记录。

要想让接口发起请求，我们需要在业务层调用它们。这里使用单例模式导出Model对象，这样在全局都能使用同一个对象的属性。下面是业务层的代码示例：

import React, { useEffect, useState } from\'react\';
import {useApollo} from \'apllo.js\';
import { Model } from \'./api/model\';

// 定义一个React组件GameAppModel
const GameAppModel: React.FC = () =&gt; {
// 使用useApollo获取Model实例
const model = useApollo(Model);

// 组件挂载时打印model.user和model.list信息
useEffect(()=&gt;{
console.log(\'model.user:\', model.user);
console.log(\'model.list:\', model.list);
})

// 定义用户数据获取状态和列表数据获取状态
const [isUserFetched, setIsUserFetched] = useState(false);
const [isListFetched, setIsListFetched] = useState(false);

// 定义获取用户数据的函数
const handleFetchUser = async () =&gt; {
// 重置用户数据获取状态
setIsUserFetched(false);
// 调用model.user的mutate方法获取用户数据，假设传递用户id为1
await model.user.mutate({ id: 1 });
// 设置用户数据获取状态为true
setIsUserFetched(true);
};

// 定义获取列表数据的函数
const handleFetchList = async () =&gt; {
// 重置列表数据获取状态
setIsListFetched(false);
// 调用model.list的mutate方法获取列表数据，假设获取第1页，10条数据
await model.list.mutate({ page: 1, size: 10 });
// 设置列表数据获取状态为true
setIsListFetched(true);
};

// 如果正在获取用户数据或列表数据，显示加载中的提示
if (model.user.loading || model.list.loading) {
return
<div>Loading...</div>
;
}

// 如果获取用户数据或列表数据时发生错误，显示错误提示
if (model.user.error || model.list.error) {
return
<div>Error occurred while fetching data.</div>
;
}

return (
<div>
<h2>User Info:</h2>
{/* 定义获取用户信息的按钮，根据loading状态禁用按钮并显示不同文字 */}
<button disabled=\"disabled\">
{model.user.loading? \'Loading User...\' : \'Fetch User Info\'}
</button>
{/* 如果已经获取到用户数据，显示数据；否则显示未获取到数据的提示 */}
{isUserFetched &amp;&amp; model.user.data? (
<pre>{JSON.stringify(model.user.data, null, 2)}</pre>
) : (

No user data fetched

)}
<h2>Item List:</h2>
{/* 定义获取列表信息的按钮，根据loading状态禁用按钮并显示不同文字 */}
<button disabled=\"disabled\">
{model.list.loading? \'Loading List...\' : \'Fetch Item List\'}
</button>
{/* 如果已经获取到列表数据，显示数据；否则显示未获取到数据的提示 */}
{isListFetched &amp;&amp; model.list.data? (
<pre>{JSON.stringify(model.list.data, null, 2)}</pre>
) : (

No list data fetched

)}

</div>
);
};

export default GameAppModel;

增删改我就不再细细演示了，下面讲讲resful API 的介绍以及，优势在哪里为什么要这样去做。