两个单独的observable Angular 2上的两个顺序订阅

Question

我在Angular 2中的两个单独的observable上有两个顺序订阅的问题。 我想：

1. 从坐标
获取位置
2. 将此位置附加到我的json
3. 将json发送到服务器

我这样做的方式是我认为错了：

this._locationService.geocode(this.location.latitude, this.location.longitude).
        subscribe(position => {
            this.location.city = this.findAddressPart(position, "locality", "long");
            this.location.country = this.findAddressPart(position, "country", "long");
            this._locationService.updateLocation(this.location)
                .subscribe(
                    location => {
                        this.location = location;
                        this.submitted = true;
                        this.submitting = false;
                    }
                );
        });

这样我的DOM在实际获取位置后只会更新5-10秒。

Answer 1

您的解决方案需要多长时间才能更新。不幸的是，除非您重新构建_locationService使用数据的方式，否则无法解决此问题。目前你有：

1. 从纬度和经度获取地理编码
2. 等待请求完成
3. 将数据从请求＃1设置为位置
4. 从位置获取更新数据
5. 等待请求完成
6. 设置更新位置
7. 更新DOM w /更新位置

有两个链接在一起的请求。如果可能的话，我会将这两个函数合并到你后端的一个调用中，这样你就可以调用类似

的东西

this._locationService.geocode(this.location.latitude, this.location.longitude).
        subscribe(location => {
            this.location = location;
            this.submitted = true;
            this.submitting = false;
        });

当然，只有当您的服务器包含用于提供此类请求的数据时，这才有效。如果您的服务器也必须进行HTTP调用，那么将其更改为上述内容将没有实际意义。

如果无法满足上述要求，您可以在第一个请求完成后更新DOM。如果一切顺利，updateLocation函数将返回发送到服务器的相同位置，对吧？您可以使用本地可用值更新DOM，而不是在第二个函数成功时更新DOM，只有在出现错误时才更改它们。这将使您的响应时间看起来快50％。这样的事情。

this._locationService.geocode(this.location.latitude, this.location.longitude).
        subscribe(position => {
            this.location.city = this.findAddressPart(position, "locality", "long");
            this.location.country = this.findAddressPart(position, "country", "long");
            // SET DOM HERE using this.location values
            this._locationService.updateLocation(this.location)
                .subscribe(
                    location => {
                        this.location = location;
                        // optionally SET DOM HERE again
                        this.submitted = true;
                        this.submitting = false;
                    }, 
                    error => {
                        // SET DOM HERE reflecting error
                    }
                );
        });