如何使用Angular中其他http服務的輸出在組件中調用http get服務？

Question

我對Angular還是很陌生，並且陷入了如何同步調用服務..

我有兩個http GET服務，可以說現在成功調用的ServiceA和ServiceB分別成功調用，即彼此獨立。

但是現在由於需求變更，我不得不在組件文件中的函數內部調用ServiceA，然后使用從之前返回的值提供的參數值在ServiceB循環中調用。

for(let i=0;i<3;i++){

    this.ServiceA.methodA().subscribe(result => {

    this.masterID= result.ID;

    console.log('Inside outer service');

     this.ServiceB.methodB(masterID).subscribe(
                    resultInner => {
                      child = resultInner.Text;
                      console.log('Inside Inner service');

                    });

    });

  }

我試圖將存儲在變量masterID的ServiceA返回的值作為參數傳遞給內部ServiceB，並通過警報檢查調用順序，但不會以同步方式調用它們。 觀察到的行為是，在由外部ServiceA返回的成功響應填充masterId值之前，內部服務（即ServiceB）被調用並且參數masterID被傳遞為空，從而提供了不正確的功能。

有人可以幫忙使它正確運行嗎？

在console.log（）中觀察到的行為

Inside Outer service
Inside Outer service
Inside Outer service

Inside Inner service
Inside Inner service
Inside Inner service

預期行為

Inside Outer service
Inside Inner service
Inside Outer service
Inside Inner service
Inside Outer service
Inside Inner service

Answer 1

您應該花一些時間來學習rxjs，因為rxjs非常強大，但是剛開始時有點難以理解。 在下面的示例中，我執行以下操作。

• 使用from()生成一組項目，以模仿您在示例中所做的事情。
• 使用switchMap()切換到新的可觀察ServiceA.methodA()
• 使用map()將流從完整結果更改為僅主ID。
• 使用switchMap使用map()創建的ID調用新的Observable新起點。
• 使用tap可以從switchMap()與serviceB()的結果中產生副作用，以對該結果執行某些操作。

碼

from(new Array(3)).pipe(
    switchMap(() => this.ServiceA.methodA()),
    tap(() => console.log('Inside outer service')),
    map(res => res.resultID),
    switchMap(masterID => this.ServiceB.methodB(masterID)),
    tap(() => console.log('Inside inner service')),
    tap(resultInner => {
         // doSomethingWith(resultInner);
         console.log(resultInner.Text);
    })
}).subscribe();

我保留了console.log()調用，將其置於tap以便您可以看到所需的結果，並在准備好后將其從實際生產代碼中刪除。

Answer 2

我看到的唯一錯誤是您傳遞masterId不帶this.masterId

this.ServiceA.methodA().subscribe(result => {
    this.masterID = result.ID;
    alert('Inside outer service');
    this.ServiceB.methodB(this.masterID).subscribe(
        resultInner => {
            child = resultInner.Text;
            alert('Inside Inner service');
        }
    );
});

---

編輯，因為您添加了循環

someFunction(): Promise<any> {
    return new Promise((resolve, reject) => {
        this.ServiceA.methodA().subscribe(result => {
            this.masterID= result.ID;
            console.log('Inside outer service');

            this.ServiceB.methodB(masterID).subscribe(
                resultInner => {
                    child = resultInner.Text;
                    console.log('Inside Inner service');
                    return resolve(resultInner); // or whatever
                }
            );
        });
    });
}

async someFunction2(): Promise<any> {
    for(let i = 0; i < 3; i++) {
        await someFunction();
    }
}