Angular 2:使用带有Observables的HTTP请求来搜索数据库

时间:2016-11-08 01:15:09

标签: angular angular2-observables

我正在关注使用带有Observables的HTTP请求来搜索数据库的Angular 2教程。以下是特定教程的链接:https://angular.io/docs/ts/latest/tutorial/toh-pt6.html

您可以搜索"按名称搜索"找到我所指的教程的区域。

以下是相关代码:

this.heroes = this.searchTerms
  .debounceTime(300)        // wait for 300ms pause in events
  .distinctUntilChanged()   // ignore if next search term is same as previous
  .switchMap(term => term   // switch to new observable each time
    // return the http search observable
    ? this.heroSearchService.search(term)
    // or the observable of empty heroes if no search term
    : Observable.of<Hero[]>([]))
  .catch(error => {
    // TODO: real error handling
    console.log(error);
    return Observable.of<Hero[]>([]);
  });

我能够对此代码进行适当的更改以使其与我的应用程序一起使用,但我想知道如何在成功返回数据时调用函数以及何时无法找到您正在查找的内容对于。它可能相对简单,但我无法搞清楚,并且不太确定如何搜索它。

1 个答案:

答案 0 :(得分:2)

  

我想知道如何在成功返回数据时以及无法找到您正在寻找的内容时调用函数

您仍然需要订阅。在您订阅之前没有任何事情发生。

this.searchTerms
  .debounceTime(300)  
  .distinctUntilChanged()
  .switchMap(term => term  
    ? this.heroSearchService.search(term)
    : Observable.of<Hero[]>([]))
  .catch(error => {
    return Observable.of<Hero[]>([]);
  })
  .subscribe(heroes => {
    this.heroes = heroes;
    doOtherStuff();
  });

这是您可以处理&#34;成功&#34;,&#34;错误&#34;和&#34;完成&#34;案例。订阅分别采用这三个回调。

 .subscribe(
   (heroes) => {},  // success
   (error) => {},   // error
   () => {}         // completed/always
 );
  

当它无法找到您正在寻找的内容时

只需检查订阅中的heroes是否成功&#34;是空的。