如何在 Angular 中创建类型安全的 HTTP 请求

2020-06-04 08:00:00 · 飞浪

介绍 Angular提供的最强大功能之一是通过使用TypeScript实现类型安全。使用TypeScript等静态类型语言，您可以编写更易于维护且易于阅读的代码，这些代码不易受到运行时错

介绍

Angular 提供的最强大功能之一是通过使用 TypeScript 实现类型安全。使用 TypeScript 等静态类型语言，您可以编写更易于维护且易于阅读的代码，这些代码不易受到运行时错误的攻击。本指南将向您展示如何将自定义类型与 Angular 的HttpClient结合使用，以创建功能强大且简单易用的 HTTP 请求，这些请求在应用程序扩展时更无错误且更易于维护。

开始使用 Angular HttpClient

首先，本指南将介绍一个简单的示例，说明如何在没有类型表达的情况下使用 Angular 的HttpClient。这是一个示例服务，它提供了一种从服务器发出针对狗品种的简单 HTTP GET 请求的方法。

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

    @Injectable()
    export class DogBreedsService {
        private breedsApiUrl = '/api/breeds';

        constructor(private http: HttpClient) { }

        getBreeds(): Observable<any> {
            return this.http.get(this.breedsApiUrl);
        }
    }
    

下面是一个使用上述服务的简单 Angular 组件。

      import { Component } from '@angular/core';

@Component({
  selector: 'app-dog-breeds',
  template: `
    <ul *ngFor="let breed of breeds$">
        <li>{{ breed.displayName }}</li>
    </ul>
    `
})
export class DogBreedsComponent {
    breeds$: Observable<any>;

    constructor(private breedsService: DogBreedsService) {
        this.breeds$ = this.breedsService.getBreeds();
    }
}
    

上面的代码大部分都很好。但是，其中存在一些问题，其中大部分问题与缺乏类型安全直接相关。

由于 TypeScript 内置的任何类型的使用方式，您将否定任何形式的类型安全，从而排除 Intellisense 等开发人员工具的好处——同时使代码更难维护，更容易出现运行时错误。事实上，由于 HTTP 请求没有与类型组合，您可能会引入一个您完全不知道的错误。在下一节中，您将识别此错误并向您的 HTTP 请求添加类型，以防止将来出现类似的错误。

创建类型

首先，创建Breed类型模型。您可以通过 TypeScript接口创建您的类型，这本质上是您的代码在使用此类型时同意遵守的契约。您的简单Breed类型将如下所示：

      interface Breed {
    id: string;
    name: string;
    relatedBreeds?: Breed[];
}
    

您的Breed类型由三个字段组成：id、name和relatedBreeds。创建了狗品种的数据模型后，您现在可以开始使用您的类型来使代码更具表现力、更易读且更不容易出错。毕竟，与any相比，Breed更能表达DogBreedsService的全部内容！

注意：为了在其他 TypeScript 文件中使用此类型，您需要使用export关键字将其导出。

将类型与 HttpClient 集成

使用以下代码，您将确保您的 HTTP 请求使用之前创建的Breed类型。

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

    @Injectable()
    export class DogBreedsService {
        private breedsApiUrl = '/api/breeds';

        constructor(private http: HttpClient) { }

        getBreeds(): Observable<Breed[]> {
            return this.http.get<Breed[]>(this.breedsApiUrl);
        }
    }
    

DogBreedsService中有两个小而强大的更改。上述两个更改都添加了所谓的类型参数。类型参数是任何健壮类型系统的基本组件，用于创建泛型。在底层，Angular HttpClient模块的get函数是一个接受类型参数的泛型函数。这允许您通过代码表达执行此 HTTP 请求将返回的内容确实是Breed类型的数组。在上面的代码中，在调用get函数之前，您可以看到<Breed>语法 - 这是一个泛型类型参数的示例。

现在，您需要更新使用更改后的服务的组件！

      import { Component } from '@angular/core';

@Component({
  selector: 'app-dog-breeds',
  template: `
    <ul *ngFor="let breed of breeds$">
        <li>{{ breed.name }}</li>
    </ul>
    `
})
export class DogBreedsComponent {
    breeds$: Observable<Breed[]>;

    constructor(private breedsService: DogBreedsService) {
        this.breeds$ = this.breedsService.getBreeds();
    }
}
    

根据 Angular 文档，将类型附加到请求实际上允许在编译时进行类型断言。这非常强大！编译并运行修改后的代码后，您可以看到错误：字段displayName在类型Breed中不存在。通过将类型添加到 HTTP 请求，您现在拥有一个可以遵循的结构和契约，以便通过 Intellisense 和其他围绕 Angular 和 TypeScript 生态系统构建的开发人员工具更快地迭代代码。

结论

Angular HttpClient是一个功能强大且稳健的 HTTP 客户端，它允许您通过其公开的通用函数编写富有表现力且类型安全的代码。通过实现您自己的自定义类型并将它们作为类型参数传递给 HttpClient ，您可以提高工作效率，同时减少应用程序中的运行时错误数量。有什么理由不喜欢它呢？

_{免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！}

_查看原文

技术指南

阅读全文

如何在 Angular 中创建类型安全的 HTTP 请求

杭州电子商务研究院

4年前 · 面向社会、服务行业、政产学研结合、整合资源、和谐发展

import { HttpClient } from '@angular/common/http'; import { Injectable } from '@angular/core'; @Injectable() export class DogBreedsService { private breedsApiUrl = '/api/breeds'; constructor(private http: HttpClient) { } getBreeds(): Observable<any> { return this.http.get(this.breedsApiUrl); } }

import { Component } from '@angular/core'; @Component({ selector: 'app-dog-breeds', template: ` <ul *ngFor="let breed of breeds$"> <li>{{ breed.displayName }}</li> </ul> ` }) export class DogBreedsComponent { breeds$: Observable<any>; constructor(private breedsService: DogBreedsService) { this.breeds$ = this.breedsService.getBreeds(); } }

import { HttpClient } from '@angular/common/http'; import { Injectable } from '@angular/core'; @Injectable() export class DogBreedsService { private breedsApiUrl = '/api/breeds'; constructor(private http: HttpClient) { } getBreeds(): Observable<Breed[]> { return this.http.get<Breed[]>(this.breedsApiUrl); } }

import { Component } from '@angular/core'; @Component({ selector: 'app-dog-breeds', template: ` <ul *ngFor="let breed of breeds$"> <li>{{ breed.name }}</li> </ul> ` }) export class DogBreedsComponent { breeds$: Observable<Breed[]>; constructor(private breedsService: DogBreedsService) { this.breeds$ = this.breedsService.getBreeds(); } }