Angular2 中的两个（或多个）异步调用

Question

我在组件中有一个函数应该 return 是一个值 (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 值是 returned 但可能 return http.get 是错误的，因为它是可观察的，而且如果我将它包装在 Promise it 中不起作用。

实际上 map() 函数从未被调用过。

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

package.json:

"@angular/core": "4.2.5",
"rxjs": "5.4.2",

Answer 1

map() 永远不会被调用，因为您从不订阅可观察对象。

您在这里使用了 promises 反模式，无论如何您都不应该需要 promises，因为 observables 本身就有链接 observables 的方法。

（顺便说一句，在第一次调用中使用 toPromise() 很奇怪，这是将 observable 转换为 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))));
}

请注意 Angular 2 现在快 2 岁了。当前版本是 6.x。是时候升级了，除此之外，切换到 RxJS 6 和 HttpClient。

Angular2 中的两个（或多个）异步调用

Two (or more) asynchronous call in Angular2

promise

typescript

angular2-services