Angular中如何将Google Geocode的Promise方法转换为Observable

是否需要转换 #

• 如果你的业务仅用简单的异步回调就能满足，没有RxJS异步流管理（比如防抖搜索、多异步结果合并、流切换等）的需求，完全不需要转换，现有Promise版本足够使用。
• 如果你的项目技术栈依赖RxJS（比如Angular项目），或者需要将地理编码结果和其他Observable流做联动处理，转换为Observable会更适配整体代码逻辑。

Observable版本实现 #

首先确保你的项目已经引入RxJS依赖，改造后的代码和原有Promise逻辑完全对齐，出错时直接返回null不抛出错误：

import { Observable } from 'rxjs';

export class Geocode {
  geocode(address: string): Observable<any> {
    const geocoder = new google.maps.Geocoder();
    // 用Observable包裹原生回调逻辑
    return new Observable(subscriber => {
      geocoder.geocode(
        { address: address },
        (results, status) => {
          if (status === google.maps.GeocoderStatus.OK) {
            subscriber.next(results[0]);
          } else {
            // 按业务要求出错直接返回null，不触发错误回调
            subscriber.next(null);
          }
          // 单值返回后直接结束流
          subscriber.complete();
        }
      );
    });
  }
}

使用示例 #

const geoCode = new Geocode();
geoCode.geocode('some address').subscribe(place => {
  // 成功和失败都会走next回调，place为null即代表请求异常
  if (place) {
    console.log(place.geometry.location);
  }
});

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