按顺序在可观察对象中执行

Question

如何在 typescript 中以清晰的方式执行依赖于序列的可观察方法？

示例：

Init(){
    this.methodThatUseObservable();
    this.methodThatShouldExecuteAfter();
    this.anotherMethod();
    ... (continue)
}

在每个方法中，我都有一个可观察的方法并订阅。

methodThatUseObservable(){
   this.service1.get().subscribe(
      (value1) => {
         this.value1 = value1;
      }
   )
}
methodThatShouldExecuteAfter(){
   this.service2.get(this.value1).subscribe(  //depends on the first
      (value2) => {
         this.value2 = value2;
      }
   )
}
anotherMethod(){
   this.service3.get(this.value2).subscribe(  //depends on the second
      (value3) => {
         this.value3 = value3;
      }
   )
}
...(so on)

当然可以：

Init(){
    this.methodThatUseObservable();
}

在这些方法中的每一个中，其他方法都依赖于：

methodThatUseObservable(){
   this.service1.get().subscribe(
      (value1) => {
         this.value1 = value1;
         this.methodThatShouldExecuteAfter();
      }
   )
}
methodThatShouldExecuteAfter(){
   this.service2.get(this.value1).subscribe(  //depends on the first
      (value2) => {
         this.value2 = value2;
         this.anotherMethod();
      }
   )
}
anotherMethod(){
   this.service3.get(this.value2).subscribe(  //depends on the second
      (value3) => {
         this.value3 = value3;
         ...(and so on)
      }
   )
}

但是我感觉不是很清楚，这样我觉得顺序不是很清楚。

也许解决方案是返回一个承诺并执行 then 方法？

    this.methodThatUseObservable().then(()=>{
       this.methodThatShouldExecuteAfter();
    }).then(()=>{
       this.anotherMethod();
    })

我不知道这样的结构变化是否可能，请帮忙。

Answer 1

我不确定这是否是您示例中的最佳实践，但是，我所做的是将每个方法包装在一个 Promise 中，然后使用 async/await 以便以可读的方式链接它们。例如，在 Angular 中：

async ngOnInit(){
    try{
        await this.methodThatUseObservable();
        await this.method2();
        await this.method3();
        console.log("Done");
    }
    catch(e){
        //Handle errors
    }
}

methodThatUseObservable() : Promise<{}>{
    return new Promise(
        (resolve, reject) => {
            this.service1.get().subscribe(
                value1 => {
                    this.value1 = value1;
                    resolve();
                },
                error => {
                    reject('Error!');
                }
            )
        }
    )
}

...Same for method2, method3

Answer 2

试试这个：

import {concat, of} from "rxjs";

concat(
  of(() => this.methodThatUseObservable()),
  of(() => this.methodThatShouldExecuteAfter()),
  of(() => this.anotherMethod())
  ).subscribe(() => {}, error => {}, () => this.doYourStuff());