將一個RxJS可觀察量的結果傳遞給下一個順序可觀察量

Question

我正在嘗試對RxJS HTTP調用進行基本鏈接，其中第一個調用將把服務器端創建的對象的ID傳遞給第二個調用。 我在實現中觀察到的是，只進行了第一次調用，並且從未執行第二次鏈接調用。

下面粗略是我的代碼。

第一個電話：

createItem(itemData) {
  return this.http.post(createUrl, itemData)
    .map((res) => res.json())
    .catch(this.handleError);
}

第二個電話：

addFileToItem(id, file): Observable<any> {
  return this.http.post(secondUrl + id, file)
    .map((res) => log(res))
    .catch(this.handleError);
}

函數定義將一個調用映射到另一個調用：

createAndUpload(itemData, file): Observable<any> {
  return createItem(itemData, file)
    .map((res) => {
      if (file) {
        return addFileToItem(res.id, file);
      }
    });
}

最后，通過subscribe()執行observable：

someFunction(itemData, file) {
  createAndUpload(itemData, file)
    .subscribe(res => {
      log(res);
      //go do something else
    };
}

Answer 1

問題出在createAndUpload ， map只是將第一次調用的結果轉換為Observable，但是你永遠不會訂閱它。

所以，簡單地說，你只需要使用mergeMap （或concatMap在這種情況下，它並不重要），而不是map 。 mergeMap運算符將訂閱內部Observable並發出其結果：

createAndUpload(itemData, file): Observable<any> {
  return createItem(itemData, file)
    .mergeMap((res) => {
      if (file) {
        return addFileToItem(res.id, file);
      }
      return Observable.empty(); // you can't return `undefined` from the inner Observable
    });
}

Answer 2

顯然map()函數實際上並沒有返回任何內容，這意味着不返回Observable對象。 相反，需要一個轉換運算符，例如mergeMap 。

這是最終工作的代碼，也使用“較新的” .pipe()運算符。 代碼需要更改的唯一地方是在Observable函數中，我定義了兩個獨立的Observable的組合。 要訪問mergeMap運算符，請不要忘記從rxjs/operators導入它。

由於我最終會弄明白的原因，我無法在沒有管道的情況下訪問mergeMap ...

createAndUpload(itemData, file): Observable<any> {
  return createItem(itemData, file)
    .pipe(
        mergeMap((res) => {
          if (file) {
            return addFileToItem(res.id, file);
          }
        })
     )
}