@angular前端项目代码优化之构建Api Tree的方法


Posted in Javascript onDecember 24, 2018

前颜(yan)

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

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

一、前后端分离(Resful api)

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

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

http(s)://www.xxx.com/api/v1/user/{ id }
http(s)://www.xxx.com/api/v1/user/getByName/{ name }
http(s)://www.xxx.com/api/v1/user/getByAge/{ age }

对应的api描述如下(为了方便理解,这里只考虑get请求):

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

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

目前各大前端框架比如angular、vue以及react等,都有提供相关HttpClient,用来发起http请求,比如get、post、put、delete等,由于本人比较熟悉angular,下面代码以angular进行举例(其他框架做法类似),代码统一使用typescript语法。

在app.component.ts中调用api:

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Component({
 selector: 'app-root',
 templateUrl: './app.component.html',
 styleUrls: ['./app.component.scss']
})
export class AppComponent {

 userInfo;

 constructor(private http: HttpClient) {
  this.getUserById(1);
 }

 async getUserById(userId) {
  const url = `https://www.xxx.com/api/v1/user/${userId}`;
  this.userInfo = await this.http.get(url).toPromise();
 }
}

三、封装UserHttpService

在项目中,由于多个页面可能需要调用同一个api,为了减少代码的冗余以及方便维护,比较好的方式是将所有的api封装到一个Service中,然后将这个Service实例化成单例模式,为所有的页面提供http服务。

angular提供了依赖注入的功能,可以将Service注入到Module中,并且在Module中的各个Component共享同一个Service,因此不需要手动去实现Service的单例模式。

代码如下:

user.http.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

const HOST_URL = `https://www.xxx.com/api/v1`;

@Injectable()
export class UserHttpService {

 constructor(private http: HttpClient) { }

 async getUserById(userId) {
  const url = `${HOST_URL}/user/${userId}`;
  return this.http.get(url).toPromise();
 }

 async getUserByName(name) {
  const url = `${HOST_URL}/user/getByName/${name}`;
  return this.http.get(url).toPromise();
 }

 async getUserByAge(age) {
  const url = `${HOST_URL}/user/getByAge/${age}`;
  return this.http.get(url).toPromise();
 }

}

app.component.ts

import { Component } from '@angular/core';
import { UserHttpService } from './user.http.service';
@Component({
 selector: 'app-root',
 templateUrl: './app.component.html',
 styleUrls: ['./app.component.scss']
})
export class AppComponent {

 constructor(private userHttpService: UserHttpService) {
  this.getUserById(1);
 }

 async getUserById(userId) {
  const userInfo = await this.userHttpService.getUserById(userId);
  console.log(userInfo);
 }

 async getUserByName(name) {
  const userInfo = await this.userHttpService.getUserByName(name);
  console.log(userInfo);
 }

 async getUserByAge(age) {
  const userInfoList = await this.userHttpService.getUserByAge(age);
  console.log(userInfoList);
 }

}

这样的好处在于:

1、团队合作:

可以将前端项目分为HttpService层和Component层,由不同的人进行分开维护

2、减少代码的冗余:

在多个Component中调用同一个api时,不需要写多份代码

3、降低维护和扩展成本:

当后端增加或修改接口时,由于所有的user api都在UserHttpService里,所以能够很容易的进行接口调整,并且不影响Component层的代码

但以上方案还存在一个缺点,即url使用字符串拼接的形式:

const url = `${HOST_URL}/user/getByName/${name}`;

这样容易出现以下问题:

1、接口名拼接出错,并且由于是字符串拼接,不会有语法提示(ts)

2、没有一份完整的映射后端的api表,出现问题时,不容易排查 因此,接下来进入本文的主题:构建Api Tree。

四、手动构建Api Tree

什么是Api Tree呢,我把它定义为将所有的api以节点的形式挂在一个树上,最后形成了一棵包含所有api的树形结构。

对api tree的构建初步想法(手动构建)如下:

/**
 * 手动构建 api tree 
 */
const APITREE = {
 domain1: {
  api: {
   v1: {
    user: {
     getByName: 'https://www.xxx.com/api/v1/user/getByName',
     getByAge: 'https://www.xxx.com/api/v1/user/getByAge'
    },
    animal: {
     getByType: 'https://www.xxx.com/api/v1/animal/getByType',
     getByAge: 'https://www.xxx.com/api/v1/animal/getByAge'
    }
   }
  }
 },
 domain2: {
  api: {
   car: {
    api1: 'https://xxx.xxx.cn/api/car/api1',
    api2: 'https://xxx.xxx.cn/api/car/api2'
   }
  }
 },
 domain3: {}
};
export { APITREE };

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

// 获取url:https://www.xxx.com/api/v1/user/getByName
const getByNameUrl = APITREE.domain1.api.v1.user.getByName;

// 获取url:https://xxx.xxx.cn/api/car/api1
const carApi1Url = APITREE.domain2.api.car.api1;

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

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

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

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

结果:

@angular前端项目代码优化之构建Api Tree的方法

优化后的UserHttpService代码如下: user.http.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { APITREE } from './api-tree';

@Injectable()
export class UserHttpService {

 constructor(private http: HttpClient) { }

 async getUserById(userId) {
  const url = APITREE.api.v1.user._this + '/' + userId;
  return this.http.get(url).toPromise();
 }

 async getUserByName(name) {
  const url = APITREE.api.v1.user.getByName + '/' + name;
  return this.http.get(url).toPromise();
 }

 async getUserByAge(age) {
  const url = APITREE.api.v1.user.getByAge + '/' + age;
  return this.http.get(url).toPromise();
 }

}

六、总结

通过api tree,能带来如下好处:

1、能够通过树的形式来获取api,关键是有语法提示
APITREE.api.v1.user.getByName

2、apiTreeConfig配置文件与后端的api接口一 一对应,方便维护

3、当后端修改api名时,apiTreeConfig可以很方便的进行调整

七、demo

github代码:https://github.com/SimpleCodeCX/myCode/tree/master/angular/api-tree

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript的一种模块模式
Mar 22 Javascript
使用隐藏的new来创建对象
Mar 29 Javascript
jQuery 下拉列表 二级联动插件分享
Mar 29 Javascript
JQuery悬停控制图片轮播——代码简单
Aug 05 Javascript
javascript弹出拖动窗口
Aug 11 Javascript
JQuery实现文字无缝滚动效果示例代码(Marquee插件)
Mar 07 Javascript
javascript中this用法实例详解
Apr 06 Javascript
JavaScript实现鼠标滚轮控制页面图片切换功能示例
Oct 14 Javascript
小程序自定义组件实现城市选择功能
Jul 18 Javascript
JQuery判断radio单选框是否选中并获取值的方法
Jan 17 jQuery
turn.js异步加载实现翻书效果
Jul 25 Javascript
layui 数据表格 根据值(1=业务,2=机构)显示中文名称示例
Oct 26 Javascript
微信小程序获取用户openid的实现
Dec 24 #Javascript
vue-router启用history模式下的开发及非根目录部署方法
Dec 23 #Javascript
小程序实现人脸识别功能(百度ai)
Dec 23 #Javascript
优雅的elementUI table单元格可编辑实现方法详解
Dec 23 #Javascript
基于webpack4.X从零搭建React脚手架的方法步骤
Dec 23 #Javascript
JavaScript基于数组实现的栈与队列操作示例
Dec 22 #Javascript
jQuery实现侧边栏隐藏与显示的方法详解
Dec 22 #jQuery
You might like
php header()函数使用说明
2008/07/10 PHP
Blitz templates 最快的PHP模板引擎
2010/04/06 PHP
ubuntu12.04使用c编写php扩展模块教程分享
2013/12/25 PHP
PHP使用Mysqli类库实现完美分页效果的方法
2016/04/07 PHP
搜索附近的人PHP实现代码
2018/02/11 PHP
PHP+redis实现微博的推模型案例分析
2019/07/10 PHP
jquery中animate动画积累的解决方法
2013/10/05 Javascript
javascript中的变量作用域以及变量提升详细介绍
2013/10/24 Javascript
javascript拖拽上传类库DropzoneJS使用方法
2013/12/05 Javascript
confirm的用法示例用于按钮操作时确定是否执行
2014/06/19 Javascript
JS+CSS实现鼠标经过弹出一个DIV框完整实例(带缓冲动画渐变效果)
2016/03/25 Javascript
JS简单获取客户端IP地址的方法【调用搜狐接口】
2016/09/05 Javascript
Underscore之Array_动力节点Java学院整理
2017/07/10 Javascript
详解在WebStorm中添加Vue.js单文件组件的高亮及语法支持
2017/10/21 Javascript
three.js中文文档学习之如何本地运行详解
2017/11/20 Javascript
jQuery实现手机号正则验证输入及自动填充空格功能
2018/01/02 jQuery
webpack引入eslint配置详解
2018/01/22 Javascript
vue.js 实现点击按钮动态添加li的方法
2018/09/07 Javascript
在vue中更换字体,本地存储字体非引用在线字体库的方法
2018/09/28 Javascript
vue响应式系统之observe、watcher、dep的源码解析
2019/04/09 Javascript
vue props 单项数据流实例分享
2020/02/16 Javascript
小谈angular ng deploy的实现
2020/04/07 Javascript
Element Card 卡片的具体使用
2020/07/26 Javascript
解决vue elementUI 使用el-select 时 change事件的触发问题
2020/11/17 Vue.js
[55:47]DOTA2上海特级锦标赛C组小组赛#2 LGD VS Newbee第三局
2016/02/27 DOTA
解决python升级引起的pip执行错误的问题
2018/06/12 Python
python 借助numpy保存数据为csv格式的实现方法
2018/07/04 Python
Python实现的括号匹配判断功能示例
2018/08/25 Python
Python实现点云投影到平面显示
2020/01/18 Python
jupyter 添加不同内核的操作
2021/02/06 Python
Ariat官网:美国马靴和服装品牌
2019/12/16 全球购物
遗嘱公证书标准样本
2014/04/08 职场文书
戒赌保证书
2015/05/11 职场文书
清明节主题班会
2015/08/14 职场文书
幼儿园安全教育随笔
2015/08/14 职场文书
古诗之爱国古诗5首
2019/09/20 职场文书