Angular调用Google Geocoding API需点两次按钮才更新输入框，如何等待服务响应后更新

你当前的代码存在异步链路断裂的问题，才会触发两次点击的现象：

• 服务层的retrieveLocation方法在无缓存场景下，内部发起的Google API请求是异步的，但方法本身没有等待异步响应完成就直接执行结束，没有向外返回任何有效值
• 第一次点击触发流程时：组件调用retrieveLocation，方法内部发起API请求后立刻返回空值，组件拿到空值就给表单赋值（实际没有生效）；等API真正响应时，只是把地址存在了服务内部的curLocation变量里，没有触发组件侧的表单更新
• 第二次点击时，因为服务里的curLocation已经存了上次请求拿到的地址，走了直接返回缓存值的分支，组件才拿到有效地址更新输入框，表现为需要点两次。

核心是打通异步调用链路，不要在服务层提前订阅HTTP请求，改成返回可观察对象，等真正拿到接口返回的地址后，再执行表单更新。

第一步：改造Geocoding服务的retrieveLocation方法 #

移除方法内部的subscribe逻辑，直接返回HTTP请求的Observable，保留缓存防重复请求的逻辑：

// 服务层需引入rxjs工具：of, tap, map
import { of, tap, map } from 'rxjs';

locResponse: any;
curLocation: string;
reverseGeo: string = "https://maps.googleapis.com/maps/api/geocode/json?";

retrieveLocation(position: any) {
  // 已有缓存直接返回
  if (this.curLocation !== undefined) {
    return of(this.curLocation);
  }
  const requestUrl = `${this.reverseGeo}latlng=${position.coords.latitude},${position.coords.longitude}&key=${this.key}`;
  // 直接返回HTTP请求的可观察对象，不提前订阅
  return this.http.get(requestUrl).pipe(
    // 拿到响应后存缓存
    tap(response => {
      this.locResponse = response;
      this.curLocation = this.locResponse.results[0].formatted_address;
    }),
    // 提取需要返回的格式化地址
    map(() => this.curLocation)
  );
}

第二步：改造组件层的getLocation方法 #

订阅服务返回的可观察对象，待拿到有效地址后再更新表单控件：

// 组件层代码
getLocation() {
  if (!navigator.geolocation) {
    alert("Geolocation is not supported by this device");
    return;
  }
  navigator.geolocation.getCurrentPosition(position => {
    // 等服务返回地址后再赋值给表单
    this.addressService.retrieveLocation(position).subscribe(address => {
      this.details.get('location').setValue(address);
    });
  });
}

• 给HTTP请求增加错误捕获逻辑：当API请求失败时，重置curLocation缓存，允许用户重试定位
• 增加加载状态提示：点击定位图标后展示加载动画，直到地址返回后再隐藏，避免用户无感知重复点击
• 补充地理定位的失败回调：除了处理定位成功的场景，也要捕获定位权限被拒、定位超时等异常场景并给用户提示

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