Angular2中的两个(或多个)异步调用

时间:2018-07-21 17:09:11

标签: typescript promise angular2-services

我在Component中有一个函数,该函数应返回值( Promise )。 为了获得该价值,我需要来自2个不同来源的信息。 假设源是一个API调用和一个数据库数据。

方法如下:

public getValue(): Promise<number> {

    return this.dataProvider.loadData().toPromise().then(data => {
        return data.feePerc
    }).then(feePerc => {
        let url = `${apiUrl}/mycontroller/value`            
        return new Promise<number>(resolve => {                
            return this.http.get(url)
                .map(response => {                       
                    let value = response.json()
                    return resolve(value * (1 + (feePerc / 100)))
                })
        })
    })
}

它不起作用。 返回了 feePerc 值,但返回http.get可能是错误的,因为它是可观察的,而且如果我将其包装在Promise中也不起作用。

实际上,从未提出 map()函数。

我最初的想法是调用这两个异步函数,并在我同时拥有两个源但仍在为简单的链式解决方案苦苦挣扎时使用某种信号量返回最终结果。

package.json:

  • “ @ angular / core”:“ 4.2.5”,
  • “ rxjs”:“ 5.4.2”,

1 个答案:

答案 0 :(得分:1)

从未调用

toPromise()是因为您从未订阅可观察对象。

您在这里使用的是Promise反模式,而且您也不应该使用Promise,因为可观察对象本身就具有链接可观察对象的方法。

(顺便说一句,在第一个调用中使用public getValue(): Observable<number> { const url = `${apiUrl}/mycontroller/value`; return this.dataProvider.loadData() .map(data => data.feePerc) .switchMap(feePerc => this.http.get(url).map(response => response.json() * (1 + (feePerc / 100)))); } 是很奇怪的,这是将可观察对象转换为Promise,而不是在第二个中使用它的正确方法)。

您需要的只是

{{1}}

请注意,Angular 2现在已有2年历史了。当前版本是6.x。现在是时候进行升级了,尤其是切换到RxJS 6和HttpClient。