How do you use Observable.bindCallback()

Question

How do I use Observable.bindCallback() with a callback that returns 2 args, callback(results, status)? The example is with google.maps.places API below:

  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]);
      }
    }
  }

I want to do something like this:

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

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

but I am unsure about the following:

1) is the best practice to "throw" an error from the next handler and catch it in the error handler, or just call the method handleError()?

2) I am getting Cannot read property 'nearbySearch' of undefined(…) error. But when I call const nearbyAsObservable = Observable.bindCallback( service.nearbySearch.bind(service) ) I get a TS error:

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

update it looks like this hack will fix the TS error

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

but the next handler complains if I give it a (result, status)=>void

3) how do I transform the Observable return from Observable<[result, status]> to Observable<PlaceResult[]>?

Try `Observable.bindCallback(service.nearbySearch.bind(service))` — cartant, Nov 08 '16 at 07:23
I answered another question using `bindCallback` with the same API you are using, but I can no longer find it. I can only assume that user's account was deleted. It'll take a little while to remember the details. — cartant, Nov 08 '16 at 08:07
I think I found the answer: use a selector function in the bindCallback()! I'll post the complete answer below. — michael, Nov 08 '16 at 08:41
Yep, that's it. You need to use a selector to map the arguments received in the callback to an array or an object and that becomes the type of the observable that's returned by the bound function. — cartant, Nov 08 '16 at 08:47

score 6 · Answer 1 · edited May 23 '17 at 12:17

The answer is the following:

1) bind the scope to your callback, as necessary (see comment)

2) if you bind the scope, then use let nearbyAsObservable : any; to fix a TS bug how do I use `Observable.bindCallback()` with typescript

3) use a selector function in Observable.bindCallback() to map multiple return args into a single response for the subscribe function, and also to throw errors. 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)
)

If you cast the `bind` result to `(request: PlaceSearchRequest, callback: (results: PlaceResult[], status: PlacesServiceStatus) => void) => void` it should play nice with TypeScript and the argument types should be inferred, but that is one long, ugly cast. — cartant, Nov 08 '16 at 09:30

How do you use Observable.bindCallback()

1 Answers1