代码之家 › 专栏 › 技术社区 › hswner

RxJS和角度HttpClient:如何异步转换值?

rxjs5 rxjs angular javascript

hswner · 技术社区 · 7 年前

我想对可观察对象发出的值应用异步转换函数。

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

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

在上面的代码中,我想应用一个转换函数 myFunc ,返回一个承诺,该承诺基于 this.http.get(url) .

通常我会使用RxJS的map操作符,但由于转换函数返回承诺,我找不到处理它的方法。

例如,我的函数是:

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

1 回复 | 直到 7 年前

rawkfist0215 7 年前

使用 mergeMap 运算符获取响应值,通过另一个可观察的操作异步执行一些修改,然后返回修改后的值。该操作符将合并HttpClient和修改器Observable发出的值,并返回一个发出变异值的Observable。

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

即

编辑 :对于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);
        }
    }

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

推荐文章

Fahad Subzwari · 我不能用rxjs过滤器过滤记录?

2 年前

Fazla Elahi Md Jubayer · 在rxjs中使用管道内的两个concatmap时,如何提取订阅块内的结果

3 年前

Irakli · 我想以角度显示id相似的数据

3 年前

Akash · 当BehaviorSubject发出两次真值时,使ngOnChange被激发

6 年前

Shamshiel · 将rxjs升级到6后,类型“Observable”上不存在属性“map”

6 年前

Corey Cole Roberto Tyley · 使用RxJS 6。x WebSocketSubject客户端

6 年前

gog · 如何观察rxjs中的属性更改?

6 年前

jesdynf · 在继续之前,如何使角度拦截器延迟?

6 年前

Sean Ivins · 角度2+HttpIntercept:在返回intercept函数之前,等待来自服务器的令牌

6 年前

Kevin Kalitowski · RxJs 6:从Observable获取ConnectableObservable

6 年前