将 HTTP 与 RxJS Observables 结合使用

2019-07-25 08:00:00 · 飞浪

介绍我们的Web应用程序异步响应。这意味着我们可以一次向我们的Web应用程序请求许多东西。在我们的Web应用程序中，请求按照先到先得的原则得到满足；在收到许多请求后，它会在其自己的线程

介绍

我们的 Web 应用程序异步响应。这意味着我们可以一次向我们的 Web 应用程序请求许多东西。在我们的 Web 应用程序中，请求按照先到先得的原则得到满足；在收到许多请求后，它会在其自己的线程中为每个请求提供响应。

异步 Web 彻底改变了 Web 应用程序的行为方式。它使我们无需等待操作完成。相反，它仅在第一个 GO 中执行所有操作。一旦结果可用，就会处理每个操作的结果。

Web 应用程序如何以异步方式工作？我们如何使用 Angular 7 实现它？

在本指南结束时，您将对 RxJS 是什么以及如何在 Web 应用程序中实现异步功能有一个基本的了解。这样，您就可以学习如何在实际应用程序中使用它。

RxJS

反应式编程是一种异步编程范式，关注数据流和变化的传播。

RxJS 库

RxJS（JavaScript 的反应式扩展）是一个库，它允许您进行异步数据编程。

RxJS 提供了 Observable 类型的实现，在该类型成为语言的一部分并且浏览器支持它之前，它是必需的。该库还提供了用于创建和使用可观察对象的实用函数。

这些实用函数可用于：

将现有的异步操作代码转换为可观察代码。
迭代流中的值。
将值映射到不同类型。
过滤流。
组成多个流。

RxJS 可观察对象

Observable 可以实现您的工作梦想，您可以订阅它的工作方式并与不同的流进行交互。我们可以将 Observable 称为 RxJS 的蓝图。它将收集新值和多个事件以进行工作。在以前的 Angular 版本中，我们使用Promises来处理请求，但我们不再使用它，因为 Promises 无法处理多个事件。RxJS Observable 不仅像 Promises 一样工作，而且可以完成更多工作。

异步模式操作之所以发生，是因为在等待 Observable 发出对象时无需阻塞。相反，它以观察者的形式创建了一个保护者，随时准备在 Observable 将来的任何时间做出适当的反应。

RxJS 操作符

操作符是构建并创建新可观察对象的函数。RxJS 可观察对象中存在不同的操作符，例如 map()、filter()、Concat() 和 merge()。

RxJS 中运算符的使用：

它有配置选项。
它返回一个接受源可观察量的函数。当返回到该函数时，运算符会观察数据可观察量、推断出值并对其进行转换。
操作员能够创建变换值的新可观测量。

错误处理

为了处理订阅异常，使用了catcherror()函数。每当对请求的响应失败时，“catcherror()”函数会处理对我们的 Angular 应用程序造成的任何损害。

我们正在使用 API 来请求数据。由于某些错误，如果 API 无法响应，则会在订阅错误函数的可观察对象中处理该错误。

注意：下面的示例中我使用的是 Angular 7。

入门

要为您的 Angular 应用程序安装 RXJS，请使用以下命令。

      npm install rxjs

从 Angular 4.3 开始，Http Client 可从 @angular/common/http 模块获得，并取代了 @angular/http 包中提供的旧 HTTP 客户端。它为Angular应用程序提供了一个简化的客户端 HTTP API，该 API 依赖于浏览器公开的 XMLHttpRequest 接口。HttpClient 的一些其他好处包括可测试性功能、类型化的请求和响应对象、请求和响应拦截、Observable API 以及简化的错误处理。我们使用 HttpClient 将数据从服务器提取到我们的应用程序。

@angular/common/HTTP中的Http 标头为Angular 应用程序的 HTTP API 提供了简化的标头。许多服务器需要额外的标头来进行保存操作。例如，它们可能需要“Content-Type”标头来明确声明请求主体的 MIME 类型。或者，服务器可能需要授权令牌。

导入 HTTP 客户端和 HTTP 标头，如下所示。

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

深入代码

现在您的系统上已经安装好了所有内容，让我们看一个简单的示例代码。

步骤 1：开始一个新项目

因为 Angular 是一个框架，所以我们需要遵循该框架的一些标准。

让我们在 RxJS 中创建一个新项目；我将我的项目命名为RxJS_observable。

      ng new RxJS_observable

第 2 步：为 RxJS 异步进程创建第一个 Angular 7 应用程序

设置 HttpClient

第一步是在src/app/app.module.ts中导入HttpClientModule。

      import { HttpClientModule } from '@angular/common/http';
@NgModule({
    declarations: [
        AppComponent
    ],
imports: [BrowserModule,HttpClientModule],
bootstrap: [AppComponent]
})
export class AppModule { }
    

接下来，让我们创建一个类模型。我将类名命名为country。

      ng generate class country

生成类后，我们来添加一些对象：

      export class Country {
    id: number;
    name: string;
    capital:string;
}
    

对于请求，我们需要调用 Angular 中所需的服务文件的 API。我将类名命名为apicall。

      ng generate service apicall

生成apicall.service.ts后，导入 HTTP 客户端，并在构造函数中进行初始化，如下所示。

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

在构造函数中：

      constructor(private httpClient: HttpClient) {}
    

在服务中导入 RxJS

在服务中，我们必须导入 RxJS，如下所示，以实现异步进程。

      import * as Rx from "rxjs/Rx";
import { from, Observable } from 'rxjs';
    

您可以使用以下命令来运行 Angular。

      ng serve

步骤 3：我们第一次请求按名称搜索 Capital

使用请求方法处理一组请求的应用程序指示针对给定资源要执行的操作。

要请求按名称搜索首都，请按照以下代码步骤操作：

apicall.service.ts

      import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import * as Rx from "rxjs/Rx";
import { from, Observable, throwError } from 'rxjs';
import { map, catchError } from 'rxjs/operators';
@Injectable({
  providedIn: 'root'
})
export class ApicallService {
  constructor(private httpClient: HttpClient) {}

  searchCountryByName(name: string): Observable<Country[]>{
    let headers: HttpHeaders = new HttpHeaders();
    headers = headers.append('Accept', 'application/json');
    headers = headers.append(
      'X-RapidAPI-Key',
      '1108554cc1mshf11c17c4fea2b3dp179054jsn2446fb7a8965'
    );
    return this.httpClient.get(
      `https://restcountries-v1.p.rapidapi.com/capital/` + name, 
       {headers: headers}
      ).pipe(
           map((data: Country[]) => {
             return data;
           }), catchError( error => {
             return throwError( 'Capital not found!' );
           })
        )
    }
}
    

在上面的代码中，我们创建了searchCountryByName()方法来调用 API。我们调用 HTTP GET 方法来按首都名称获取所有数据的列表。我们请求 API URL https://restcountries-v1.p.rapidapi.com/capital/name，同时传递name以使用映射键获取到 Country 类的响应映射。它将返回响应并映射到对象。如果未找到首都，则会抛出未找到异常，从而抛出错误“未找到首都！ ”。在标头中，我们附加了 API 密钥和内容类型。

应用程序.组件.ts

      export class AppComponent {
  
  constructor(public http: HttpClient, private apiService: ApicallService){}

  ngOnInit(){
  }

  name:string;
  sear

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

_查看原文

技术指南

阅读全文

将 HTTP 与 RxJS Observables 结合使用

杭州电子商务研究院

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

import { HttpClientModule } from '@angular/common/http'; @NgModule({ declarations: [ AppComponent ], imports: [BrowserModule,HttpClientModule], bootstrap: [AppComponent] }) export class AppModule { }

import { Injectable } from '@angular/core'; import { HttpClient } from '@angular/common/http'; import * as Rx from "rxjs/Rx"; import { from, Observable, throwError } from 'rxjs'; import { map, catchError } from 'rxjs/operators'; @Injectable({ providedIn: 'root' }) export class ApicallService { constructor(private httpClient: HttpClient) {} searchCountryByName(name: string): Observable<Country[]>{ let headers: HttpHeaders = new HttpHeaders(); headers = headers.append('Accept', 'application/json'); headers = headers.append( 'X-RapidAPI-Key', '1108554cc1mshf11c17c4fea2b3dp179054jsn2446fb7a8965' ); return this.httpClient.get( `https://restcountries-v1.p.rapidapi.com/capital/` + name, {headers: headers} ).pipe( map((data: Country[]) => { return data; }), catchError( error => { return throwError( 'Capital not found!' ); }) ) } }