Angular 4按顺序执行请求,如果一个请求失败则停止

时间:2018-01-09 09:01:20

标签: angular rest http

我很抱歉这样问,但我几乎是一个Angular noob并坚持修复别人的代码,我担心,这些代码不是那么有经验的与Angular一起。

这是代码

const searchTermStream = this.searchTerm.valueChanges
  .debounceTime(400)
  .filter(query => query.length > 2 || query.length === 0)
  .do(query => this.adjustBrowserUrl(query))
  .distinctUntilChanged()
  .switchMap(query => this.itemService.findItems(query))
  .subscribe()
;

const paramsStream = this.route.queryParams
  .map(params => decodeURI(params['query'] || ''))
  .do(query => this.searchTerm.setValue(query))
  .distinctUntilChanged()
  .switchMap(query => this.itemService.findItems(query))
  .subscribe()
;

this.itemList$ = this.itemService.items$;

this.itemCount$ = this.itemService.countAllItems();

显然,此代码会进行休息调用并从后端检索项目和itemCount,并在提供查询时进行过滤。

问题是当第一次调用失败(会话超时)时,其他调用仍在执行并导致后端异常,异常处理得当,但调用仍然是不需要的。

所以我现在需要弄清楚如何顺序进行调用并在第一个失败时完全停止调用(无论出于何种原因)。 我在网上找到了一些例子,并在这里使用了promises和observables,但由于我是一个菜鸟,我在制作它的头部或尾部时会遇到一些麻烦,并根据我的目的调整它们。

非常感谢任何帮助。

1 个答案:

答案 0 :(得分:1)

您可以尝试这样做:

this.itemList$ = this.itemService.items$;

this.itemList$.subscribe(() => {
   this.itemCount$ = this.itemService.countAllItems();
},
err => {...})

不要忘记随后清除ngOnDestroy中的订阅(Angular/RxJs When should I unsubscribe from `Subscription`

或者如果您更喜欢使用承诺:

 import "rxjs/add/operator/toPromise";


 this.itemList$ = this.itemService.items$;

    this.itemList$.toPromise().then(() => {
       this.itemCount$ = this.itemService.countAllItems();
    },
    err => {...})