为何RxJS的bindCallback封装PlacesService.getDetails无返回，手动封装正常

错误原因 #

核心问题是getDetails方法调用时的this上下文丢失：
google.maps.places.PlacesService的getDetails方法内部依赖自身实例的上下文才能正常执行，你直接把this.placeService.getDetails作为参数传给bindCallback时，相当于只提取了函数本身，切断了它和原placeService实例的绑定关系。bindCallback内部调用这个方法时，this指向不符合预期，导致方法执行异常，自然不会触发后续回调。
你手动封装Observable的写法是直接通过this.placeService.getDetails()调用方法，this会自动绑定到placeService实例，所以可以正常运行。

修复方案 #

只需要在传入bindCallback时，给方法绑定回原实例的上下文即可：

getDetails$(request: google.maps.places.PlaceDetailsRequest) {
  // 用bind方法把getDetails的this绑定回原placeService实例
  const request$ = bindCallback(this.placeService.getDetails.bind(this.placeService));
  return request$(request);
}

补充说明 #

bindCallback会把回调函数接收的所有参数打包成数组作为Observable的发射值，这里getDetails的回调会接收result和status两个参数，所以你订阅时拿到的值是[result, status]。如果要对齐你手动封装只返回成功结果、异常抛错的逻辑，可以加一层操作符处理：

import { map } from 'rxjs';

getDetails$(request: google.maps.places.PlaceDetailsRequest) {
  const request$ = bindCallback(this.placeService.getDetails.bind(this.placeService));
  return request$(request).pipe(
    map(([result, status]) => {
      if (status === google.maps.places.PlacesServiceStatus.OK) {
        return result;
      }
      throw new Error(status);
    })
  );
}

内容的提问来源于stack exchange，提问作者Crocsx