@angular前端项目代码优化：构建Api Tree

前颜（yan）

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

一、前后端分离（Resful api）

在前后端分离的开发模式中，前后端的交互点主要在于各个数据接口，也就是说后端把每个功能封装成了api，供前端调用。
举个例子，假设后端提供了关于user的以下3个api：

1 http(s)://www.xxx.com/api/v1/user/{
    id }
2 http(s)://www.xxx.com/api/v1/user/getByName/{
    name }
3 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