以角度保留http调用的顺序

时间:2018-03-20 06:29:12

标签: angular rxjs angular-httpclient

我正试图通过SOleaflet找到的几种方法来解决我面临的订单问题。

我有一个方法,我在为the mex documentation层数组加载一些数据:

private loadSelectedTileLayersCapabilities(): void {

        let tempTileLayer;

        this.selectedTileLayerIds.forEach(
            (selectedTileLayer: string) => {
                tempTileLayer = this.getTileLayerById(selectedTileLayer);

                this.capabilitiesService.getTileLayerDimensions(tempTileLayer.url, tempTileLayer.name, tempTileLayer.id)
                .subscribe(
                    dimensions => this.displayNewTileLayer(dimensions)
                );
            }
        );
    }

然后我有一个方法,http调用正在发生:

public getTileLayerDimensions(urlToFormat: string, tileLayerName: string, tileLayerId: string): Observable<Dimensions> {

        const capabilitiesUrl = `serviceUrl`;

        return this.httpClient.get(capabilitiesUrl, {responseType: "text"})
            .map(res => {

                // Doing stuff with data

                return dataForLayer;
            });

    }

问题是,displayNewTileLayer(dimensions)方法是以随机顺序调用的。有没有办法保存项目的存储顺序 selectedTileLayerIds数组?

2 个答案:

答案 0 :(得分:3)

由于http调用是异步的,因此响应可能以与发出请求相同的顺序到达。您可以做的是创建一个请求列表,创建一个forkJoin并等待所有响应解决。然后,您可以为所有回复调用displayNewTileLayer(dimensions) - 方法。

这是一个例子

    const httpCalls = []; // store the requests here
    for (let i = 0; i < 3; i++) {
      httpCalls.push(this.http.get('someUrl').map(response => response));
    }
    forkJoin(httpCalls).subscribe(res => {
      // all responses completed. returns an array of data (one for each response).
      console.log('res', res);
    });

在这种情况下,此代码可能有效:(代码未经过测试,您可能必须在代码中导入forkJoin运算符)

import { forkJoin } from 'rxjs/observable/forkJoin';

private loadSelectedTileLayersCapabilities(): void {

    let tempTileLayer;
    let requests = []:

    this.selectedTileLayerIds.forEach(
        (selectedTileLayer: string) => {
            tempTileLayer = this.getTileLayerById(selectedTileLayer);
            const request = this.capabilitiesService.getTileLayerDimensions(tempTileLayer.url, tempTileLayer.name, tempTileLayer.id)
            requests.push(request);

        }
    );
    forkJoin(requests).subscribe(res => {
      res.forEach(dimension => this.displayNewTileLayer(dimension));
    })
}

答案 1 :(得分:2)

我会考虑使用private int number; public Integer(int x){ this.number = x; } 运算符。

您的代码如下所示

concat

这样,concatObs以与数组 private loadSelectedTileLayersCapabilities(): void { let tempTileLayer; let concatObs; this.selectedTileLayerIds.forEach( (selectedTileLayer: string) => { tempTileLayer = this.getTileLayerById(selectedTileLayer); const httpCall = this.capabilitiesService.getTileLayerDimensions(tempTileLayer.url, tempTileLayer.name, tempTileLayer.id); if (!concatObs) { concatObs = httpCall); } else { concatObs.concat(httpCall); } } ); concatObs.subscribe( dimensions => this.displayNewTileLayer(dimensions) ); } 相同的顺序发出。您应该考虑是否可以将排序逻辑移动到服务器,即具有接收id(selectedTileLayersIds)数组并返回维度数组的服务。通过这种方式,您可以减少网络流量,避免连续的同步http调用。