嵌套订阅无限循环 - Angular / RxJS答案

【问题标题】：Nested subscribe infinity loop - Angular / RxJS嵌套订阅无限循环 - Angular / RxJS
【发布时间】：2018-08-17 21:09:51
【问题描述】：

我正在做一个嵌套订阅，我知道这不是完美的方式。我有这样的事情：

 this.route.params.subscribe((params) => {            
        this.order$
            .getMailCommande(this.id)
            .subscribe((datas) => {
                var Object = localStorage.getItem('dataCommand');
                var test = JSON.parse(retrievedObject);
                this.over = test.over;
                while (this.over == false) {
                    this.order$
                        .getMoreInfo(this.id, this.type, this.nbr)
                        .subscribe((datas2) => {
                            var array = datas2.MoreInfo;
                            var Object2 = localStorage.getItem('dataCommand');
                            var test2 = JSON.parse(Object2);
                            test2.ListeInfo.push(array);
                            this.over = true;
                        });
                }

自从我添加了循环后，我得到了一个无限循环，我正在寻找使用 RxJS 中的 switchmap 或运算符更改此代码，但我还没有成功。

关于我的无限循环的任何想法以及如何保持相同的逻辑？

提前致谢

【问题讨论】：

它更依赖于您对代码的要求，this.over 还被操纵在哪里？在您的代码中，您似乎只想运行一次循环（它不会，因为async），因为您将this.over 设置为true。所以问题是你真正想要的逻辑是什么？
我自己将 this.over 设置为 true 以避免无限循环（但我猜由于异步而不起作用）。但实际上，我得做一些操作才能知道 this.over 是真还是假。所以我有可能在退出循环之前循环了几次

标签： javascript angular typescript rxjs

【解决方案1】：

如果您想在循环中执行所需的逻辑并在某些条件匹配时中断，那么有一个单独的方法如何调用自身，除非满足条件？？

this.route.params.subscribe((params) => {            
        this.order$
            .getMailCommande(this.id)
            .subscribe((datas) => {
                var Object = localStorage.getItem('dataCommand');
                var test = JSON.parse(retrievedObject);
                this.over = test.over;
                while (this.over == false) {
                    this._loopMeOver.subscribe();
                }
            })
})


private _loopMeOver() {

    return this.order$
        .getMoreInfo(this.id, this.type, this.nbr)
        .map((datas2) => {
            var array = datas2.MoreInfo;
            var Object2 = localStorage.getItem('dataCommand');
            var test2 = JSON.parse(Object2);
            test2.ListeInfo.push(array);
            if (condition is successfull) {
                //return true mayBe
            }
            else {
                this._loopMeOver().subscribe()
            }
        });
}

【讨论】：

【解决方案2】：

我看不到您的完整代码，无法全面了解您正在尝试做什么。但我有点觉得你刚刚开始学习 rxjs，this.over 的东西是试图继续检查你的嵌套请求是否完成。顺便说一句，您的示例代码中存在各种错误。

所以是的，您需要其他 rxjs 运算符，例如 switchMap() 来使您的代码更简洁。我将使用新的 rxjs pipable 语法向您展示如何做到这一点的一般概念。

this.route.params.pipe(
  // this switchMap() is called when route params changes
  // order$ seems not a Observable, it's misleading to name it with an ending $
  switchMap(() => this.order$.getMailCommande(this.id)),
  // this tap() operator is called after getMailCommande() finish
  tap(() => {
    var retrievedObject = localStorage.getItem('dataCommand');
    var test = JSON.parse(retrievedObject);
    this.over = test.over;
  }),
  // this switchMap() is called after code inside tap is called
  switchMap(() => this.order$.getMoreInfo(this.id, this.type, this.nbr)),
  // this tap() is called after getMoreInfo() finish
  tap(datas2 => {
    var array = datas2.MoreInfo;
    var Object2 = localStorage.getItem('dataCommand');
    var test2 = JSON.parse(Object2);
    test2.ListeInfo.push(array);
    this.over = true;
  })
).subscribe();

【讨论】：