Angular中等待两个异步地理编码完成后调用methodZ的问题

你的问题核心在于placeDecode里调用的google.maps.Geocoder.geocode是异步操作，而当前代码是同步执行逻辑——placeDecode实际上没有返回任何有效结果（回调里的return无法传递到函数外部），而且methodZ会在两个地址解析还没完成时就被调用，自然拿不到正确的地址值。

下面给你两种可行的修复方案，推荐用Promise+async/await的方式，代码更清晰易读：

方案一：使用Promise和async/await（推荐） #

首先修改placeDecode，让它返回一个Promise，把异步解析的结果通过Promise的resolve/reject传递出来：

private placeDecode(input: HTMLInputElement): Promise<string | null> {
  return new Promise((resolve, reject) => {
    const location = input.value;
    const geoCode = new google.maps.Geocoder();
    geoCode.geocode({ address: location }, (result, status) => {
      if (status === 'OK') {
        resolve(result[0].formatted_address);
      } else {
        // 这里可根据需求选择返回null或抛出错误
        resolve(null);
        // 若需抛出错误可改用：reject(new Error(`地址解析失败: ${status}`));
      }
    });
  });
}

然后修改ngAfterViewInit，用async修饰函数，并用await等待两个解析完成后再调用methodZ：

async ngAfterViewInit() { 
  this.searches.startSearch = document.getElementById("startSearch").getElementsByTagName('input')[0]; 
  this.searches.endSearch = document.getElementById("endSearch").getElementsByTagName('input')[0]; 

  // 等待两个异步解析任务全部完成
  const [address1, address2] = await Promise.all([
    this.placeDecode(this.searches.startSearch),
    this.placeDecode(this.searches.endSearch)
  ]);

  this.methodZ(address1, address2); 
}

方案二：使用回调函数（适合习惯回调写法的场景） #

如果偏好回调风格，可以通过计数器跟踪解析完成的数量，确保两个地址都解析完成后再执行methodZ：

ngAfterViewInit() { 
  this.searches.startSearch = document.getElementById("startSearch").getElementsByTagName('input')[0]; 
  this.searches.endSearch = document.getElementById("endSearch").getElementsByTagName('input')[0]; 

  let completedCount = 0;
  let address1: string | null = null;
  let address2: string | null = null;

  // 检查是否两个解析都完成，完成则调用methodZ
  const checkAndCallMethodZ = () => {
    if (completedCount === 2) {
      this.methodZ(address1, address2);
    }
  };

  // 处理起始地址解析
  this.placeDecode(this.searches.startSearch, (result) => {
    address1 = result;
    completedCount++;
    checkAndCallMethodZ();
  });

  // 处理终点地址解析
  this.placeDecode(this.searches.endSearch, (result) => {
    address2 = result;
    completedCount++;
    checkAndCallMethodZ();
  });
}

// 修改placeDecode为接收回调参数
private placeDecode(input: HTMLInputElement, callback: (result: string | null) => void) { 
  const location = input.value; 
  const geoCode = new google.maps.Geocoder(); 
  geoCode.geocode({ address: location }, (result, status) => { 
    if (status === 'OK') { 
      callback(result[0].formatted_address); 
    } else { 
      callback(null); 
    } 
  }); 
}

原代码失效的原因 #

1. placeDecode里的return是在geocode的回调函数内部，这个返回值不会被placeDecode本身返回，所以address1和address2实际都是undefined。
2. methodZ是同步调用的，此时两个geocode的异步请求还未完成，自然拿不到解析后的地址。

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