RxJS & Angular HttpClient：如何异步转换值？

Question

我想对 observable 发出的值应用异步转换函数。

@Injectable
export class ApiService{
    constructor(private http: HttpClient){}

    getSomething(url): Observable<any>{
        return this.http.get(url);
    }
}

在上面的代码中，我想对 this.http.get(url) 发出的值应用一个转换函数 myFunc，这是一个 returns 承诺。

通常我会使用RxJS的map操作符，但是由于转换函数returns是一个promise，我找不到处理它的方法

例如，假设我的函数是：

function myFunc(value){
    return new Promise((resolve, reject) => {
        // modify the value async

        resolve(modifiedValue);

        // ...
    });
}

有没有合适的方法来处理这个任务？我觉得下面的不合适吧？

return this.http.get(url).map(myFunc);

任何帮助将不胜感激。

注意：我使用的是 RxJS 5.5.2

Answer 1

使用mergeMap运算符获取响应值，通过另一个Observable操作异步执行一些修改，然后return修改后的值。此运算符将合并 HttpClient 发出的值和您的修饰符 Observable 和 return 发出变异值的单个 Observable。

编辑：包括@bygrace评论中的Observable.fromPromise位以获得更完整的答案。

即

编辑：对于 RxJs v5.5+

import { pipe } from 'rxjs/util/pipe';
import { mergeMap } from 'rxjs/operators';


    @Injectable
    export class ApiService{
        constructor(private http: HttpClient){}

        getSomething(url): Observable<any>{
            return this.http.get(url).pipe( 
                                        mergeMap(myFunc) 
                                      );
        }

        private myFunc(x): Observable<any> {
            // do some asynchronous modification that returns an Observable
            return Observable.fromPromise(x);
        }
    }

Pre RxJs v5.5

@Injectable
export class ApiService{
    constructor(private http: HttpClient){}

    getSomething(url): Observable<any>{
        return this.http.get(url)
               .mergeMap(data => {
                   // do some asynchronous modification that returns an Observable
                   return Observable.fromPromise(data);
                });
    }
}

参见：http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-mergeMap

RxJS & Angular HttpClient：如何异步转换值？

RxJS & Angular HttpClient: How to transform value asynchronously?

javascript

rxjs

rxjs5

angular