如何使用 get 函数在 Angular 中进行 API 调用？

Question

我需要调用以下API， https://lhp-command-center-webapi-dev.azurewebsites.net/api/sites/List，使用 get 函数而不传递任何参数。我如何在我的 Angular 应用程序中执行此操作，我需要使用的代码片段是什么，我确实需要导入任何特定的库或在构造函数中传递任何特定的变量？

APIS 需要显示在下面的屏幕上。

我应该收到以下5个网站，

{“结果”：[{“id”：“5c655c35-0e6f-47a2-a2c7-26714a135598”，“auditable”：{“createdBy”：“[email protected]”，“createdServerDateUTC”：“2023-02- 23T17:30:56.363655Z","createdLocalTime": "2023-02-23T17:30:56Z","lastUpdateBy": null,"lastUpdateServerDateUTC": null,"lastUpdateLocalTime": null,"deletedBy": null,"deletedLocalTime" ": null,"deletedServerDateUTC": null}, "name": "站点名称 6","address": "地址 6","description": "描述 6","contactInfo": "联系信息 6","companyId": "4a71925e-0345-49db-9e76 -a067c03d1483"}, {“id”：“4b47d284-3d41-4537-93ab-b3b26a5ef710”，“可审计”：{“createdBy”：“[email protected]”，“createdServerDateUTC”：“2023-02-21T16：42：05.9256249Z” “createdLocalTime”：“2023-02-21T16:38:37.081Z”，“lastUpdateBy”：null，“lastUpdateServerDateUTC”：null，“lastUpdateLocalTime”：null，“deletedBy”：null，“deletedLocalTime”：null，“deletedServerDateUTC” “： 无效的}， “名称”：“SiteName2”，“地址”：“asdf”，“描述”：“asdf”，“contactInfo”：null，“companyId”：“4a71925e-0345-49db-9e76-a067c03d1483”}， {“id”：“1fd348a4-791d-4f43-bbd6-41637ed73f4b”，“可审计”：{“createdBy”：“[email protected]”，“createdServerDateUTC”：“2023-02-21T16：46：20.9211014Z” “createdLocalTime”：“2023-02-21T16:38:37.081Z”，“lastUpdateBy”：null，“lastUpdateServerDateUTC”：null，“lastUpdateLocalTime”：null，“deletedBy”：null，“deletedLocalTime”：null，“deletedServerDateUTC” “： 无效的}， “名称”：“SiteName3”，“地址”：“asdf3”，“描述”：“asdf3”，“contactInfo”：null，“companyId”：“4a71925e-0345-49db-9e76-a067c03d1483”}， {“id”：“522b5f3e-32e5-4586-8008-c9e49b22e425”，“可审计”：{“createdBy”：“[email protected]”，“createdServerDateUTC”：“2023-02-21T16：47：23.598851Z” “createdLocalTime”：“2023-02-21T16:38:37.081Z”，“lastUpdateBy”：null，“lastUpdateServerDateUTC”：null，“lastUpdateLocalTime”：null，“deletedBy”：null，“deletedLocalTime”：null，“deletedServerDateUTC” ": null}, "name": "SiteName4","address": "asdf4","description": "asdf4","contactInfo": null, "companyId": "4a71925e-0345-49db-9e76-a067c03d1483" }, {“id”：“ec6b076d-11d8-40ee-a43f-d3e82060211a”，“可审计”：{“createdBy”：“[email protected]”，“createdServerDateUTC”：“2023-02-21T16:48:03.4976548 Z”，“createdLocalTime”：“2023-02-21T16：38：37.081Z”，“lastUpdateBy”：null，“lastUpdateServerDateUTC”：null，“lastUpdateLocalTime”：null，“deletedBy”：null，“deletedLocalTime”：null， “deletedServerDateUTC”：null}，“name”：“SiteName5”，“address”：“asdf5”，“description”：“asdf5”，“contactInfo”：null，“companyId”：“4a71925e-0345-49db-9e76- a067c03d1483"} ], "totalNumberOfReco数据”：5}

Answer 1

要使用 http.get，你需要一个构造函数 (HttpClient) 和导入 (@angular/common/http)。例如，你的“这个”也需要创建

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

totalAngularPackages: any;

  constructor(private http: HttpClient) {}

ngOnInit() {
    this.http.get<any>('https://api.npms.io/v2/search?q=scope:angular').subscribe(data => {
        this.totalAngularPackages = data.total;
    })        
}

Answer 2

如果您使用 6.6.7 以上版本的 rxjs，并且旧的消费 observables 的方式已被弃用，请尝试这种新的消费方式。

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

totalAngularPackages: any;

  constructor(private http: HttpClient) {}

ngOnInit() {
  this.http.get<any>('https://api.npms.io/v2/search?q=scope:angular').subscribe({
    next: (data) => {
        this.totalAngularPackages = data.total;
    },
    error: (error) => {
        console.log(error)
    },
    complete: () => {
        console.log('complete')
    }
  })      
}