两个独立的观测量角2上的两个顺序订阅

Question

对于角2中的两个独立的可观测数据，我有两个顺序订阅的问题。我试图：

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