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

一、前言

之前在前公司接触到一种很有意思的权限校验接口组合方式，在当时的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 的介绍以及，优势在哪里为什么要这样去做。