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);
      }
    });
}

最后，observable通过subscribe()：

执行

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);
          }
        })
     )
}

将一个RxJS可观察量的结果传递给下一个顺序可观察量

2 个答案: