如何将@angular项目构建Api Tree方法改写为高效长尾词？

本文共计1187个文字，预计阅读时间需要5分钟。

前缀（yan）+ 在前端项目开发过程中，经常将后端会提供一个数据接口（简称api），为了减少后期维护以及出错成本，我的考虑是希望找到一种方法，可以将所有的api以某种方式统一管理。

前颜（yan）

在前端项目的开发过程中，往往后端会给到一份数据接口（本文简称api），为了减少后期的维护以及出错成本，我的考虑是希望能够找到这么一种方法，可以将所有的api以某种方式统一的管理起来，并且很方便的进行维护，比如当后端修改了api名，我可以很快的定位到该api进行修改，或者当后端添加了新的api，我可以很快的知道具体是一个api写漏了。

于是，我有了构建Api Tree的想法。

一、前后端分离（Resful api）

在前后端分离的开发模式中，前后端的交互点主要在于各个数据接口，也就是说后端把每个功能封装成了api，供前端调用。

举个例子，假设后端提供了关于user的以下3个api：

www.xxx.com/api/v1/user/{ id } www.xxx.com/api/v1/user/getByName/{ name } www.xxx.com/api/v1/user/getByAge/{ age }

对应的api描述如下（为了方便理解，这里只考虑get请求）：

1 获取用户id的用户数据
2 获取用户名为name的用户信息
3 获取年龄为age的用户列表

二、在Component中调用api接口获取数据

目前各大前端框架比如angular、vue以及react等，都有提供相关HttpClient，用来发起www.xxx.com/api/v1/user/${userId}`; this.userInfo = await this.www.xxx.com/api/v1`; @Injectable() export class UserHttpService { constructor(private www.xxx.com/api/v1/user/getByName', getByAge: 'www.xxx.com/api/v1/user/getByAge' }, animal: { getByType: 'www.xxx.com/api/v1/animal/getByType', getByAge: 'www.xxx.com/api/v1/animal/getByAge' } } } }, domain2: { api: { car: { api1: 'xxx.xxx.cn/api/car/api1', api2: 'xxx.xxx.cn/api/car/api2' } } }, domain3: {} }; export { APITREE };

有了api tree，我们就可以采用如下方式来从api树上摘取各个api节点的url，代码如下：

// 获取url：www.xxx.com/api/v1/user/getByName const getByNameUrl = APITREE.domain1.api.v1.user.getByName; // 获取url：xxx.xxx.cn/api/car/api1 const carApi1Url = APITREE.domain2.api.car.api1;

但是以上构建api tree的方式存在两个缺点：

1、需要在各个节点手动拼接全路径

2、只能摘取子节点的url：getByName和getByAge,无法摘取父节点的url，比如我想获取 www.xxx.com/api/v1/user ，无法通过 APITREE.domain1.api.v1.user 获取

const APITREE = { domain1: { api: { v1: { // user为父节点 // 缺点一：无法通过APITREE.domain1.api.v1.user获取 // www.xxx.com/api/v1/user user: { // 缺点二：在getByName和getByAge节点中手动写入全路径拼接 getByName: 'www.xxx.com/api/v1/user/getByName', getByAge: 'www.xxx.com/api/v1/user/getByAge' } } } } };

五、Api Tree生成器（ApiTreeGenerator）

针对手动构建Api Tree的问题，我引入了两个概念：apiTreeConfig（基本配置）和apiTreeGenerator（生成器）。

通过apiTreeGenerator对apiTreeConfig进行处理，最终生成真正的apiTree。

1、apiTreeConfig我把它称之为基本配置，apiTreeConfig具有一定的配置规则，要求每个节点名（除了域名）必须与api url中的每一节点名一致，因为apiTreeGenerator是根据apiTreeConfig的各个节点名进行生成， api tree config配置如下：

/** * api tree config * _this可以省略不写，但是不写的话，在ts就没有语法提示 * 子节点getByName,getByAge以及_this可以为任意值，因为将会被apiTreeGenerator重新赋值 */ const APITREECONFIG = { api: { v1: { user: { getByName: '', getByAge: '', _this: '' } }, _this: '' } }; export { APITREECONFIG };

2、apiTreeGenerator我把它称之为生成器，具有如下功能：

1） 遍历apiTreeConfig，处理apiTreeConfig的所有子节点，并根据该节点的所有父节点链生成完整的url，并且作为该节点的value，比如： APITREECONFIG.api.v1.user.getByName -> www.xxx.com/api/v1/user/getByName

2） 遍历apiTreeConfig，处理apiTreeConfig的所有父节点，在每个父节点中添加_this子节点指向父节点的完整url。

apiTreeGenerator（生成器）的代码如下：

（由于项目中只用到一个后端的数据，这里只实现了单域名的apiTreeGenerator，关于多域名的apiTreeGenerator，大家可以自行修改实现。）

import { APITREECONFIG } from './api-tree.config'; const APITREE = APITREECONFIG; const HOST_URL = `www.xxx.com`; /** * 为api node chain添加HOST_URL前缀 */ const addHost = (apiNodeChain: string) => { return apiNodeChain ? `${HOST_URL}/${apiNodeChain.replace(/^\//, '')}` : HOST_URL; }; /** * 根据api tree config 生成 api tree： * @param apiTreeConfig api tree config * @param parentApiNodeChain parentApiNode1/parentApiNode2/parentApiNode3 */ const apiTreeGenerator = (apiTreeConfig: string | object, parentApiNodeChain?: string) => { for (const key of Object.keys(apiTreeConfig)) { const apiNode = key; const prefixChain = parentApiNodeChain ? `${parentApiNodeChain}/` : ''; if (Object.prototype.toString.call(apiTreeConfig[key]) === '[object Object]') { apiTreeGenerator(apiTreeConfig[key], prefixChain + apiNode); } else { apiTreeConfig[key] = parentApiNodeChain ? addHost(prefixChain + apiTreeConfig[key]) : addHost(apiTreeConfig[key]); } } // 创建_this节点 (这里需要放在上面的for之后) apiTreeConfig['_this'] = parentApiNodeChain ? addHost(`${parentApiNodeChain}`) : addHost(''); }; apiTreeGenerator(APITREECONFIG); export { APITREE };

结果：

优化后的UserHttpService代码如下： user.github.com/SimpleCodeCX/myCode/tree/master/angular/api-tree

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持自由互联。