Angular2使用Observables优化服务器交互策略

75 浏览量更新于2024-08-31 收藏 92KB PDF 举报

"这篇教程将探讨如何在Angular2中利用Observables实现交互控制，特别是针对异步操作和服务器端交互的场景。相较于Angular1.x中的Promise，Observables提供了更强大的功能，如延迟加载和可处理的异步任务。我们将通过一个搜索功能的实例来展示Observable在解决实际问题中的应用。在Angular2中，Reactive Extensions (Rx) 的Observable成为处理异步操作的主要工具。Observable相比Promise的优势在于它可以被订阅和取消订阅，允许在任何时候控制数据流，而且支持延迟加载，这在处理用户交互时特别有用。例如，在搜索功能中，我们不希望在用户每次键入时都发送请求，而是等待一段时间用户停止输入后再进行搜索。问题场景是这样的：用户在一个输入框中输入关键词，系统实时搜索并显示结果。在这种情况下，有三个关键问题需要解决： 1. 避免频繁触发搜索：为防止用户每次键入都发起请求，我们可以引入debounceTime操作符，它会在用户停止输入一段时间后才执行搜索。 2. 没有变化则不重新搜索：使用distinctUntilChanged操作符，确保只有在用户输入的文本发生变化时才会发起新的搜索请求。 3. 处理异步返回顺序：由于服务器响应的不确定性，我们需要确保显示最新搜索的结果。为此，我们可以使用switchMap操作符，它会取消之前的请求，确保总是显示与当前搜索关键词匹配的最新结果。为了更好地理解这些概念，我们将使用wikipedia API创建一个简单的搜索应用。在`app.ts`和`wikipedia-service.ts`两个文件中，我们将实现搜索服务，其中会应用到上述提到的RxJS操作符。这个示例演示了如何将Observables应用于实际的Angular2项目中，以优化用户体验和服务器资源的使用。完整的代码示例和详细步骤可以参考原文提供的demo链接。通过这个实例，开发者可以学习到如何利用Angular2中的Observables来优雅地处理用户交互和异步操作，提高应用的性能和响应性。"

利用利用Angular2的的Observables实现交互控制的方法实现交互控制的方法

在Angular1.x中，我们使用Promise来处理各种异步。但是在angular2中，使用的是Reactive Extensions (Rx)的Observable。

对于Promise和Observable的区别，网上有很多文章，推荐egghead.io上的这个7分钟的视频（作者 Ben Lesh）。在这个视频

的介绍中，主要说的，使用Observable创建的异步任务，可以被处理，而且是延时加载的。这篇文章里，我们主要针对一些

在跟服务器端交互的时候遇到的问题，来看看Observable给我们带来的特性。

实例场景实例场景

首先，我们来定义一下问题的场景。假设我们要实现一个搜索功能，有一个简单的输入框，当用户输入文字的时候，实时的利

用输入的文字进行查询，并显示查询的结果。

问题问题

在这个简单的场景当中，一般需要考虑3个问题：

不能在用户输入每个字符的时候就触发搜索。不能在用户输入每个字符的时候就触发搜索。

如果用户输入每个字符就触发搜索，一来浪费服务器资源，二来客户端频繁触发搜索，以及更新搜索结果，也会影响客户端的

响应。一般这个问题，都是通过加一些延时来避免。

如果用户输入的文本没有变化，就不应该重新搜索。如果用户输入的文本没有变化，就不应该重新搜索。

假设用户输入了’foo’以后，停顿了一会，触发了搜索，再敲了一个字符’o’，结果发现打错了，又删掉了这个字符。如果这个时

候用户又停顿一会，导致触发了搜索，这次的文本’foo’跟之前搜索的时候的文本是一样的，所以不应该再次搜索。

要考虑服务器的异步返回的问题。要考虑服务器的异步返回的问题。

当我们使用异步的方式往服务器端发送多个请求的时候，我们需要注意接受返回的顺序是无法保证的。比如我们先后搜索了2

个单词’computer’, ‘car’, 虽然’car’这个词是后来搜的，但是有可能服务器处理这个搜索比较快，就先返回结果。这样页面就会

先显示’car’的搜索结果，然后等收到’computer’的搜索结果的时候，再显示’computer’的结果。但是，这时候在用户看来明明

搜索的是’car’，却显示的是另外的结果。

迎接挑战迎接挑战

在这个实例中，我们使用wikipedia的api接口来开发一个简单的实例，实现简单的搜索功能。

实现搜索实现搜索

由于只是演示，我们的app里面只包含2个文件: app.ts 和 wikipedia-service.ts，最终版本的源文件，请参考原文提供的demo

链接。

我们直接来看最初版本的WikipediaService是如何实现的：

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

import { URLSearchParams, Jsonp } from '@angular/http';

@Injectable()

export class WikipediaService {

constructor(private jsonp: Jsonp) {}

search (term: string) {

var search = new URLSearchParams()

search.set('action', 'opensearch');

search.set('search', term);

search.set('format', 'json');

return this.jsonp

.get('http://en.wikipedia.org/w/api.php?callback=JSONP_CALLBACK', { search })

.toPromise()

.then((response) => response.json()[1]);

}

在这里版本中，使用Jsonp模块来请求api结果，它的结果应该是一个类型为Observable<Response>的对象，我们把返回的结

果从Observable<Response> 转换成 Promise<Response>对象，然后使用它的then方法把结果转成json。这样，这个search

方法的返回类型为Promise<Array<string>>。

注意上面，我们使用response.json()[1]方式，从原先的结果中，得到我们需要的查询结果的列表，列表里面都是string。

这个看起来很简单，在angular1.x里面，也基本都是使用$http或$resource，来返回一个Promise类型的结果。

下面就是app.ts的部分内容（因为这只是演示，所以直接在app.ts里面直接定义module和component，并且调用service，在真

实的app中，应该创建相应的组件来实现）:

下载后可阅读完整内容，剩余3页未读，立即下载

weixin_38539705

粉丝: 6
资源: 952

Angular2使用Observables优化服务器交互策略

angular2 入门和示例书

Angular2 Observables：实现实时交互与服务器异步处理的关键

ANGULAR

Angular2 http jsonp的实例详解

Udemy_Observables

angular 组件通信的几种实现方式

AngularApp

angular2-communicating-between-components:Angular 25-在具有可观察和主题的组件之间进行通信

ng-book2-angular6-r68

angular分页插件

最新资源