-2

我希望在函数结束之前运行一个回调函数。但是，回调似乎是异步的，我正在构建的数组最终是未定义的。下面是代码：

  function getLocDetails(location) {
    const google = window.google
    const service = new google.maps.places.PlacesService(mapRef.current)

    var request = {
      placeId: location.place_id
    }

    function callback(place, status) {
      if (status === google.maps.places.PlacesServiceStatus.OK) {
        // console.log(place)
        return place
      }
    }

    let tempDetailedPlace = service.getDetails(request, callback)
    console.log(tempDetailedPlace)
    return tempDetailedPlace
  }

tempDetailedPlace 始终返回未定义。我已经检查以确保 google-maps-api 是正确的，并且我在其他地方使用了相同的功能（它工作正常）。有什么方法可以使回调同步或使其在 return 语句之前暂停？还是我需要实现某种异步功能？谢谢！

4

2 回答 2

0

service.getDetails必须返回一个承诺，因此您需要在调用之后添加一个 .then() 块，例如，

service.getDetails(request).then(callback)

假设您希望在获得响应后调用您的回调函数。

或使此函数异步并在调用之前添加 await 以等待异步任务完成。

于 2020-12-29T20:04:07.887 回答
0

在这种情况下，return回调函数中的语句被吞下，不会为您做任何事情。由于您认识到这里涉及一些异步活动，因此必须区别对待此代码。

现代方法是使用Async/Await

下面的代码演示了这种方法。

几点注意事项：

  1. 注意使用async和await
  2. 该callback()方法不再有返回值，而是设置了一个属性值
  3. 调用service.getDetails()是异步的 - 这是您寻求的解决方案
  4. 现在返回异步值的结果

最后，最后一行向您展示了如何调用getLocDetails().

该函数的返回值是一个 Promise 对象，您可以使用.then()它来处理返回的异步结果。

async function getLocDetails(location) {
  const google = window.google
  const service = new google.maps.places.PlacesService(mapRef.current)
  let processedOutput;

  var request = {
    placeId: location.place_id
  }

  function callback(place, status) {
    if (status === google.maps.places.PlacesServiceStatus.OK) {
      // console.log(place)
      processedOutput = 'something you want this to be';
    }
  }

  await service.getDetails(request, callback);
  return processedOutput;
}

getLocDetails(someLocation).then(output => { console.log(output); });

于 2020-12-29T20:10:39.610 回答