angular - 在 RxJs Observable 中包装一个 API 函数

标签 angular rxjs ngrx-effects

我是 RxJs 的新手,我有一个用于地理编码的 API,它提供了如下功能:

simpleGeocode(options)
* where options = { address: {addr: ... }, success: Function, failure: Function}. The success function returns the geocoded LatLon object.

我在带有 NGRX Effects 的 Angular 应用程序中使用它,所以我希望它能作为 Observable,这样我就可以使用标准的 Effect 设置,例如:

@Effect()
public calculateLocation: Observable<void> = this.actions
    .ofType(actions.CALCULATE_LOCATION)
    .switchMap((action) => {
        let location = action.payload;

        let options = {
            address: location.address
        };
         // ...

        this.geocodeService.simpleGeocode(options)
            .map(latLon => new actions.CalculateLocationSuccessAction(latLon);
            .catch(error => new actions.CalculateLocationFailureAction(error);
        },

但我完全不知道如何包装该库调用以使其成为 Observable。我已经从 http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#static-method-bindCallback 中阅读了一些关于 bindCallback() 的信息。但我不完全明白。我确实知道它需要一个回调方法作为函数的最后一个参数,所以它看起来不适合我的情况,因为成功和失败函数都作为对象的一部分传递给函数。

我如何从这个 API 方法中创建一个 Observable,将成功回调映射到 Observable 的下一个回调并将失败映射到 Observable 的错误?

最佳答案

您可以使用 Observable.create 来包装带有回调接口(interface)的外部库。

类似的东西应该可以工作:

Observable.create(observer => {
  geocoder.geocode({'address': address}, function(results, status) {
   if (status === 'OK') {
     observer.next(results);
     observer.complete();
   }
   else {
     observer.error(status);
   }
  });
});

关于angular - 在 RxJs Observable 中包装一个 API 函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45990606/

相关文章:

javascript - 如何使用 RxJS 从 arrayBuffer 中拆分数据帧?

angular - 错误 : Cannot find the outlet myteam_outlet to load 'MemberListingComponent'

当推送新的 main 时,azure 上的 Angular 前端不会在移动设备上重新加载

angular - 类似 promise 风格的顺序可观察对象

javascript - rxjs ReplaySubject 句柄

angular - 调度多个 Action 并等待完成发送下一个

Angular 5,HttpClient 将日期字段更改为 UTC

Angular2/Nativescript : Issues converting a service that used to use LocalStorage to one that uses nativescript-application/settings

angular - ngrx/effects 方法比 redux-thunk 有什么优势?

javascript - 处理 NGRX 效果后的操作