如何在 Angular 7 中管理 API 函数调用服务答案

【问题标题】：How to manage API function call services in Angular 7如何在 Angular 7 中管理 API 函数调用服务
【发布时间】：2020-04-02 21:50:04
【问题描述】：

我完成了一个 Angular 7 网络应用程序（大致）。例如，我有一个documents.service.ts 文件，它包含以下HTTP GET 请求函数：

public sendOnlyCoverPage(strProNo: string, strEstesFileName: string): Observable<any> {
    return this._http.get(this.FilesApi + "/GetSendOnlyCoverPage?strProNo=" + strProNo + '&strEstesFileName=' + strEstesFileName, httpOptions);
}

POST 请求格式如下：

public FTP_PutFile(ftpModel: any): Observable<any> {
    var obj = JSON.stringify(ftpModel);
    return this._http.post(this.FilesApi + "/PostFTP_PutFile", obj, httpOptions);
}

我有两个问题：

问题 1：

我在上面的不同服务中有很多 HTTP GET 和 POST 函数。我觉得我在 API 函数设计上做错了，因为当我打开任何服务文件时，有很多类似上面的函数。我在想有什么方法可以集中这些 api 功能。比如我可以创建一个中间服务，每当我需要进行API调用时，我可以传递函数名、url和参数等。

问题 2：

如上面的代码所示，我有参数ftpModel: any。我知道最好创建一个对象映射（接口）来替换任何类型。但是同样，有很多这样的参数。有没有解决方案，而不是为每个参数创建每个对象映射（接口）？

【问题讨论】：

此类服务的全部意义在于提供一个可读、易于调用、类型安全、易于模拟原始 HttpClient 的更高抽象。如果你提供了非常通用的方法，它们都将任何作为参数，那么服务就不再有用了：HttpClient 已经提供了。

标签： angular angular7 angular2-services

【解决方案1】：

问题 1 您应该创建一个抽象的 BaseService，如下所示：

import {HttpClient} from '@angular/common/http';
import {Observable} from 'rxjs';
import {environment} from '../../environments/environment';

export abstract class BaseService<T> {
  private endpoint: string;

  constructor(protected http: HttpClient,
              endpoint: string) {
    this.endpoint = endpoint;
  }

  findAll(): Observable<T[]> {
    return this.http.get<T[]>(this.getUrl());
  }

  findOne(id: number): Observable<T> {
    return this.http.get<T>(`${this.getUrl()}/${id}`);
  }

  save(objeto: T): Observable<T> {
    return this.http.post<T>(this.getUrl(), objeto);
  }

  delete(id: number): Observable<void> {
    return this.http.delete<void>(`${this.getUrl()}/${id}`);
  }

  protected getUrl(): string {
    return `${environment.api_url}${this.endpoint}`;
  }

  complete(query: string): Observable<T[]> {
    return this.http.get<T[]>(`${this.getUrl()}/complete?query=${query}`);
  }

}

此外，在您的服务中扩展它：

export class ProductService extends BaseService<Product> {

  constructor(protected http: HttpClient) {
    super(http, 'product');
  }
}

My github中的一个例子

问题 2 更好的方法仍然是您提到的，创建用于映射的类/接口。

【讨论】：