Angular 2 - 链接 http 请求时避免延迟

Question

    this.http.get(validate\uniqueness).subscribe(unique => {
        console.log(" first subscribe ");
        if(unique.isValid) {
            this.http.put(url, data).subscribe(val => {
            console.log("second Subscribe")
            }
        });
    });

我们有一个自定义的 http 微调器，它在请求挂起时启动，在收到响应时停止。在上面的第一次订阅调用代码中，微调器被调用，一旦检索到结果，微调器就会停止，页面显示时没有微调器，再次调用第二次订阅时，微调器被调用。我们可能会在第一次通话和第二次通话之间有所延迟。有没有办法避免延迟？我使用过mergeMap、flatMap 但没有运气。

Answer 1

首先，您应该链接您的 http 调用：

this.http.get(validate\uniqueness)
    .map(req => req.json().unique)
    .filter(unique => unique.isValid)
    .switchMap(this.http.put(....))
    .subscribe(val => console.log(val))

但这也不能解决您的问题。您在这里有两个单独的http 请求，一个由另一个触发。这些请求之间总是会有一些延迟。您可以在微调器停止之前添加延迟，允许后续请求“骑”同一个微调器。

我为加载指示所做的是编写自己的rxjs operators。

基本上，我的 http 调用如下所示：

Observable.loadingDefer('name of loading state', () => {
    // log or whatever
    return this.http.get(...)
})
.map(...)
...
.stopLoading('name of loading state')
.subscribe(...)

我有一个保存Map<string, BehaviourSubject<boolean>> 的简单服务，它基本上是加载状态名称（以防我想影响不同的对象，并且没有一个全局加载状态）和行为主体之间的映射表示是否正在加载，默认为false。

Observable.loadingDefer 使用 Observable.defer，但它使用服务（以单例形式导出，很像 angular-redux's NgRedux）并声明加载状态。

stopLoading 运算符使用finally 运算符发送指示的停止标志。我在这里使用finally 来解决请求失败的情况。

这对我来说已经足够好了，但我认为它确实在每个 http 调用周围制作了一些样板。也许这是可以避免的。

希望它能以某种方式帮助你:)