使用async/await从回调中获取数据,并仅在解析promise后返回值

Question

我正在尝试使用async/await,但我认为我批判性地误解了一些东西.

尽可能基本上,我试图使用谷歌地图api计算位置列表和一个指定位置之间的距离.

这是我正在尝试做的一个粗略的例子:https://jsfiddle.net/qu5y69rj/1/

您可以看到该函数的结果是undefined3次,而不是我期望的那样,{distance: "ZERO_RESULTS"}对于我设计的示例,每次调用都是如此.

getDistance = async (start, end) => {
  const origin = new google.maps.LatLng(start[0], start[1]);
  const final = new google.maps.LatLng(end[0], end[1]);
  const service = new google.maps.DistanceMatrixService();
  let result; //need to return this value!
  await service.getDistanceMatrix(
    {
        origins: [origin],
      destinations: [final],
      travelMode: 'DRIVING'
    }, (response, status) => {
      if(status === 'OK') result = {distance: response.rows[0].elements[0].status}
    }
  )
  return result;
}

为什么在承诺解决之前返回结果？result只有在该承诺解决后,我才能返回值？我的理解是,通过告诉javascript等待,我说在这个承诺解决之前不要继续前进.这是不正确的？我很困惑,这让我把头发拉了出来.任何帮助表示赞赏.

Answer 1

在service.getDistanceMatrix接受一个回调,这意味着TI最有可能不返回的承诺.

但是,异步函数需要承诺.

作为修复,您可以将getDistanceMatrix其包装在promise中(或使用另一个返回promise的方法):

const getDistanceMatrix = (service, data) => new Promise((resolve, reject) => {
  service.getDistanceMatrix(data, (response, status) => {
    if(status === 'OK') {
      resolve(response)
    } else {
      reject(response);
    }
  })
});

getDistance = async (start, end) => {
  const origin = new google.maps.LatLng(start[0], start[1]);
  const final = new google.maps.LatLng(end[0], end[1]);
  const service = new google.maps.DistanceMatrixService();
  const result = await getDistanceMatrix(
    service,
    {
      origins: [origin],
      destinations: [final],
      travelMode: 'DRIVING'
    }
  )
  return {
    distance: result.rows[0].elements[0].status
  };
};