如何排隊兩個observable？

-2

我是新來Angular 2.我的應用程序有一個配置文件列出所有的API網址。如何排隊兩個observable？

我創建了一個定位器服務來加載config.json。其他服務使用此服務來獲取其特定網址。

@Injectable() 
export class LocatorService { 
    private config: any; 
    private loadConfig: Promise<any>; 
    constructor(private _http: Http) { 
     this.loadConfig = this._http.get('config/config.json') 
       .map(res => this.config = res.json()).toPromise(); 
    } 

    public getConfig() { 
     return this.loadConfig.then(() => this.config); 
    } 
}

我有這個其他服務發送一個HTTP請求到一個URL。此服務從定位器服務獲取URL。

@Injectable() 
export class OtherService { 
    private _data: any; 
    private url: string; 
    constructor(private _http: Http, private locatorService: LocatorService) { 
     this.geturl(); 
    } 

    public loadData(): model[] { 
     this.geturl().then(() => this._http.get() 
        .map(res => this._data = res.json()) 
        .catch(error => 
        Observable.throw(error.json().error || 'Server error')) 
        .subscribe(t => this._data = t.json()); 

     return this._data; 
    } 

    private geturl() { 
     return this.locatorService.getConfig().then(t => { 
     this.url = t.serviceUrl; 
     console.log(this.url); 
     }); 
    } 
}

我的組件調用此loadData n獲取所需的數據。我如何實現相同？

我不是很清楚如何等待配置url被加載然後發送http請求並返回數據。

請幫忙。

來源

2016-12-27 Akanksha

在這裏使用承諾有什麼意義？這兩個請求實際上都是可觀察的。而且你做錯了什麼，因爲上面的代碼應該導致順序請求。請提供[MCVE]（http://stackoverflow.com/help/mcve）來複制這個問題，一個plunk會有所幫助。 – estus

您不需要使用Promise這個意思then不需要使用getConfig功能LocatorService。做如下修改，並確保你有一個實例在尤爾應用LocatorService並重新進行檢查：

// LocatorService

@Injectable() 
export class LocatorService { 
    private config: any = null; 

    constructor(private _http: Http) { 
     if (this.config === null) { 
      this._http.get('config/config.json') 
       .map(res => res.json()).subscribe(res => { 
       this.config = res; 
       }); 
     } 
    } 

    public getConfig() { 
     return this.config; 
    } 
}

// OtherService

@Injectable() 
export class OtherService { 
    private _data: any; 
    private url: string; 

    constructor(private _http: Http, private locatorService: LocatorService) { 
     this.url = this.locatorService.getConfig(); 
    } 

    public loadData(): model[] { 
     return this._http.get(this.url.serviceUrl) 
        .map(res => this._data = res.json()) 
        .catch(error => 
        Observable.throw(error.json().error || 'Server error'));   
    } 

}

來源

2016-12-27 11:08:02 ranakrunal9

不，它不起作用。 getConfig不會等待http請求完成。 – Akanksha

上面的代碼對原始代碼沒有任何好處。它並行運行請求，'if（this.config === null）'check是無用的，因爲每個服務實例只能運行一次構造函數。 – estus

你可以用它做這樣：

@Injectable() 
export class LocatorService { 
    private loadConfig: Promise<any>; 
    constructor(private _http: Http) { 
     this.loadConfig = this._http.get('config/config.json') 
       .map(res => this.config = res.json()).toPromise(); 
    } 

    public getConfig() { 
     return this.loadConfig; 
    } 
} 

@Injectable() 
export class OtherService { 
    private _data: any; 
    constructor(private _http: Http, private locatorService: LocatorService) { 
    } 

    public loadData() { 
     Observable.from(this.locatorService.getConfig()) 
      .switchMap((config) => this._http.get(config.serviceUrl)) 
      .catch(error => Observable.throw(error.json().error || 'Server error')) 
      .subscribe(t => this._data = t.json()); 
    } 
}

來源

2016-12-27 13:50:58

如何排隊兩個observable？

回答

相關問題