0

我有一个form/component必须执行 4 个单独的 API 调用才能执行“保存”。真的，这些交易中只有一个需要等待其他 3 个，但为了安全起见，我还是想把所有 4 个都链接起来。

这是我的设置方式：

save() {
    this.save1(saveObject1)
        .subscribe(response => {
            if (response === 0) {
                this.processErrorResult('save1');
            }

            this.save2(saveObject2)
                .subscribe(response2 => {
                    if (response2 === 0) {
                        this.processErrorResult('save1');
                    }

                    this.save3(saveObject3)
                        .subscribe(response3 => {
                            if (response3 === 0) {
                                this.processErrorResult('save1');
                            }

                            if (this.noErrorsInFirst3Saves()) {
                                this.save4(saveObject4)
                                    .subscribe(response4 => {
                                        if (response4 === 0) {
                                            this.processErrorResult('save1');
                                        }

                                        if (!this.hasErrors()) {
                                            this.router.navigate(['confirmation']);
                                        }
                                    });
                            }
                        });
                });
        });
}

private save1(saveObject: any): Observable<int> {
    this.api.save1(saveObject)
        .subscribe(successful => {
            return Observable.of(1);
        }, failed => {
            return Observable.of(0);
        });
}

private save2(saveObject: any): Observable<int> {
    this.api.save2(saveObject)
        .subscribe(successful => {
            return Observable.of(1);
        }, failed => {
            return Observable.of(0);
        });
}

private save3(saveObject: any): Observable<int> {
    this.api.save3(saveObject)
        .subscribe(successful => {
            return Observable.of(1);
        }, failed => {
            return Observable.of(0);
        });
}

private save4(saveObject: any): Observable<int> {
    this.api.save4(saveObject)
        .subscribe(successful => {
            return Observable.of(1);
        }, failed => {
            return Observable.of(0);
        });
}

在每个save{number}函数中，我都有日志消息，因此我确切地知道这些函数执行的顺序（以及响应返回）。

当我点击保存时，它 [几乎] 立即重定向到我的确认页面，然后我可以坐在那里在 chrome 开发工具中观看我的控制台窗口，并看到来自 API 调用的响应开始进入。

为什么这个设置不接受这些交易的显式链接？我知道在Angular1 中，用promise, 和做.then(response => {});.

我能想到的唯一不同的是，对于每个 API 调用，无论是get/ post/ put/ delete，它总是在 chrome 开发工具的网络面板中显示 2 个调用。第一次调用RequestMethod设置为，Options而随后的调用是对应的//get设置相应的。postputdeleteRequestMethod

我不记得在我最近处理的任何应用程序中看到过那些（重复的调用），（也许我只是从来没有关注过）所以也许这只是 API 调用的标准操作过程。

这里有什么想法吗？

编辑：回应哈利在下面的建议答案

我正在尝试实施您的答案，但对如何实施仍然有些困惑，这里仔细看看我的设置：

private save1(saveObject: any): Observable<number> {
    if (saveObject.hasChanges()) {
        return this.api.save1(saveObject)
            .map(successful => {
                return this.parseSaveResponse(successful, saveObject, true); // true indicates a successful API response
            })
            .catch(failed => {
                return this.parseSaveResponse(successful, saveObject, false); // false indicates a successful API response
            });
    } else {
        return Observable.of(-1); // no changes necessary, return immediately
    }
}

private parseSaveResponse(response: any, saveObject: any, transactionSuccessful: boolean) {
    this.logService.logTransaction({transactionType}, saveObject, response, transactionSuccessful);

    if (!transactionSuccessful) {
        // add to error list object to be displayed on the form
        return 0;
    }

    return 1;
}

当达到这一点时，它给我一个错误，上面.catch({});写着：

'(error: any) => 0 | 类型的参数 1' 不可分配给类型为“（错误：任何，捕获：Observable<0 | 1>）=> ObservableInput<{}>”的参数。键入'0 | 1' 不可分配给类型 'ObservableInput<{}>'。类型“0”不可分配给类型“ObservableInput<{}>”。）

4

2 回答 2

1

您的代码存在很多问题，这些问题可能会有所贡献。首先，您的 save1/save2/save3 方法应该只返回您可以订阅的 API 中的 observable。

其次，您使用的是 Typescript 中不存在的int类型。使用号码。

private save1(saveObject: any): Observable<number> {
  return this.api.save1(saveObject);
}
// or
private save1(saveObject: any): Observable<number> {
  return this.api.save1(saveObject).map(response => 1).catch(response => 0)
}

如果您想修改发出的项目，您可以添加将发出的项目映射到其他东西的 map 运算符。

最后，您应该避免从可观察对象中订阅可观察对象。您可以使用flatMap运算符将可观察对象链接在一起。这会将 Observable 发射的项目转换为 Observable，然后将这些项目的发射扁平化为单个 Observable。

save() {
  this.save1(saveObject1)
    .flatMap(response1 => this.save2(saveObject2))
    .flatMap(response2 => {
      if (response2 === 0) {
        // handle error
      }
      return this.save3(saveObject3);
    })
    .flatMap(() => this.save4(saveObject4))
    .subscribe(response4 => {
      // do redirect
    });
  }

http://reactivex.io/documentation/operators/flatmap.html

于 2017-09-08T14:27:22.320 回答
0

我认为您需要“返回”您的可观察值。前任：

改变这个：

this.api.save1(saveObject)

到：

return this.api.save1(saveObject)
于 2017-09-08T13:48:21.280 回答