在回调函数中访问数据

Question

我有一个地址地理编码功能，returns 同一地址的城市名称

  // geocode the given address
  geocodeAddress(address, callback) {
    this.mapsAPILoader.load().then(() => {
      var geocoder = new google.maps.Geocoder();
      geocoder.geocode({ 'address': address }, function (results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
          results[0].address_components.forEach(arrAddress => {
            if (arrAddress.types[0] == "locality") {
              callback(arrAddress.long_name);
            }
          })
        } else {
          console.log("Geocode was not successful for the following reason: " + status);
        }
      });
    });
  };

当我调用该函数并想要打印城市名称时，它从 geocodeAddress 函数下面的代码行打印 'undefined'，然后正确打印城市名称

this.geocodeAddress(this.offerAddress, data => {
  this.hostCity = data;
  console.log(this.hostCity);
});
console.log(this.hostCity);

我试图在第二个 console.log 函数之前添加一些超时，但没有成功

因此，我对从地理编码器返回数据后如何访问此值很感兴趣，因为我需要使用此数据存储在数据库中，如果我尝试像这样存储

    this.geocodeAddress(this.offerAddress, data => {
            this.hostCity = data;
            this.service.addData({"address": this.offerAddress, "city": this.hostCity}, "/data")
                .subscribe(data => {
                  this.router.navigate(['list']);
                })
          });

它存储数据但 router.navigate 无法正常工作

所以我需要在 geocodeAddress 回调函数之外访问 hostCity 的解决方案，或者如何在这个 geocodeAddress 回调函数中正确调用其他函数

Answer 1

如果您使用的是 TypeScript，您可以将 geocodeAddress 方法 return 设为 Promise，而不是使用回调，然后使用 async/await:

async geocodeAddress(address): Promise<string[]> {
    return new Promise((resolve, reject) => {
        this.mapsAPILoader.load().then(() => {
           var geocoder = new google.maps.Geocoder();
           geocoder.geocode({ 'address': address }, function (results, status) {
               if (status == google.maps.GeocoderStatus.OK) {
                   const result: string[] = [];
                   results[0].address_components.forEach(arrAddress => {
                       if (arrAddress.types[0] == "locality") {
                           result.push(arrAddress.long_name);
                       }
                   });
                   resolve(results);
               } else {
                   console.log("Geocode was not successful for the following reason: " + status);
                   reject(status);
               }
           });
       });
    });
};

现在，此函数 return 是一个数组，其中包含您要查找的所有地址的长名称。使用它：

const data: string[] = await this.geocodeAddress(this.offerAddress);
this.hostCity = data[0];
// do whatever you want now

这样您既可以享受异步编程的好处，又可以享受同步编程的简单性。

在回调函数中访问数据

Accessing data in callback function

javascript

angular

google-maps

typescript

google-geocoder