【问题标题】:How do you use Observable.bindCallback()你如何使用 Observable.bindCallback()
【发布时间】:2017-03-21 17:19:28
【问题描述】:

如何将Observable.bindCallback() 与返回2 个参数callback(results, status) 的回调一起使用?该示例使用下面的google.maps.places API:

  const service = new google.maps.places.PlacesService(map);
  // service.nearbySearch(request, callback);


  function callback(results, status) {
    if (status === google.maps.places.PlacesServiceStatus.OK) {
      for (var i = 0; i < results.length; i++) {
        createMarker(results[i]);
      }
    }
  }

我想做这样的事情:

const handleError = err=>console.error(error);

const nearbyAsObservable = Observable.bindCallback(service.nearbySearch)
nearbyAsObservable(request)
   .subscribe( 
     (results,status)=>{
       if (status!="OK") handleError(results);
       callback
     }
     , handleError
   )

但我不确定以下几点:

1) 是从next 处理程序中“抛出”错误并在error 处理程序中捕获它的最佳做法,或者只是调用方法handleError()

2) 我收到Cannot read property 'nearbySearch' of undefined(…) 错误。但是当我打电话给const nearbyAsObservable = Observable.bindCallback( service.nearbySearch.bind(service) ) 时,我得到一个 TS 错误:

// const nearbyAsObservable = Observable.bindCallback(service.nearbySearch.bind(service) )
// nearbyAsObservable(request)
[ts] Supplied parameters do not match any signature of call target.
const nearbyAsObservable: () => Observable<{}>

更新看起来这个 hack 将修复 TS 错误

const nearbyAsObservable : any = Observable.bindCallback(service.nearbySearch.bind(service) )
nearbyAsObservable(request)
   .subscribe( 
     (results,status)=>{
       if (status!="OK") handleError(results);
       callback
     }
     , handleError
   )

但是如果我给它(result, status)=&gt;voidnext 处理程序会抱怨

3) 如何将 Observable 返回从 Observable&lt;[result, status]&gt; 转换为 Observable&lt;PlaceResult[]&gt;

【问题讨论】:

  • 试试Observable.bindCallback(service.nearbySearch.bind(service))
  • 你怎么知道你没有正确处理错误?
  • 我使用bindCallback 和您使用的相同 API 回答了另一个问题,但我再也找不到它了。我只能假设用户的帐户已被删除。记住细节需要一点时间。
  • 我想我找到了答案:在 bindCallback() 中使用选择器函数!我将在下面发布完整的答案。
  • 是的,就是这样。您需要使用选择器将回调中接收到的参数映射到数组或对象,这将成为绑定函数返回的可观察对象的类型。

标签: angular typescript rxjs rxjs5


【解决方案1】:

答案如下:

1) 必要时将作用域绑定到您的回调(见注释)

2) 如果绑定了作用域,则使用let nearbyAsObservable : any; 修复一个TS bug how do I use `Observable.bindCallback()` with typescript

3) 使用Observable.bindCallback() 中的selector 函数将多个返回参数映射到subscribe 函数的单个响应中,并抛出错误。 How do I use the RXJS selector function in the Observable.bindCallback method?

let nearbyPlaces = function(position: google.maps.LatLng) : Observable<google.maps.places.PlaceResult[]> {  
  const service = new google.maps.places.PlacesService(map)
  // 1) bind scope
  const nearbySearchCallback = service.nearbySearch.bind(service)

  let nearbyAsObservable : any;
  // 2) type any fixes: 
  //    [ts] Supplied parameters do not match any signature of call target. 
  //    const nearbyAsObservable: () => Observable<{}>  

  nearbyAsObservable = Observable.bindCallback( 
    nearbySearchCallback        // with bound scope
    , (results, status) => {    // 3) selector function
        if (status != google.maps.places.PlacesServiceStatus.OK) throw {status, results};
        return results  
      }
  );
  const placeRequest = {
    location: position,
    radius: 25,
    rankBy: google.maps.places.RankBy.PROMINENCE,
  }
  return nearbyAsObservable(placeRequest) as Observable<google.maps.places.PlaceResult[]>
}


// usage example:
nearbyPlaces(position).subscribe(
  (results:google.maps.places.PlaceResult[])=>console.log(results)
  , err=>console.error(err)
)

【讨论】:

  • 如果你将 bind 结果转换为 (request: PlaceSearchRequest, callback: (results: PlaceResult[], status: PlacesServiceStatus) =&gt; void) =&gt; void 它应该可以很好地使用 TypeScript,并且应该推断出参数类型,但这是一个长而丑陋的转换。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2018-08-19
  • 2017-05-14
  • 2010-09-06
  • 2021-02-25
  • 2011-03-29
  • 2011-01-23
  • 2011-11-30
相关资源
最近更新 更多