javascript - 从类导出 Google 距离矩阵时，async-await 不起作用

Question

我正在使用谷歌地点自动完成功能和距离矩阵来输入两个位置并打印出两个位置之间的距离。我有两个 javascript es6 类来将 Google API 分离为服务。

我的问题是我正在尝试等待从距离矩阵服务获取距离的响应，然后将其记录到控制台，但是当我记录它时，我得到了未定义的信息。距离矩阵服务在我记录后返回响应。这一定意味着我在方法中的等待不起作用。我做错了什么？

距离矩阵.js

export default class DistanceMatrixService {
    constructor(pickup, dropoff, garage){
        .....
        }

    getDistance(arg1, arg2) {
        this.distance.getDistanceMatrix({
        origins: [arg1],
        destinations: [arg2],
        travelMode: 'DRIVING',
        unitSystem: google.maps.UnitSystem.IMPERIAL
      }, response => {
          console.log(response) //actually returns desired response
          return response.rows[0].elements[0].distance.text}
    );
 }

main.js

calcButton.addEventListener('click', async (event) => {
    event.preventDefault();

    const distanceMatrix = new DistanceMatrixService(pickupInfo.formatted_address, dropoffInfo.formatted_address)
    const pickup =  pickupInfo.formatted_address
    const dropoff = dropoffInfo.formatted_address

    const ptd = await distanceMatrix.getDistance(pickup, dropoff);

    console.log(ptd) // undefined
 });

我希望 console.log(ptd) 等待 distanceMatrix.getDistance() 完成，但实际结果是 ptd 被记录为未定义，然后距离矩阵中的 console.log(response) 接下来被注销。这应该是相反的。

Answer 1

async/await适用于 Promise，不适用于回调。请尝试以下操作，返回 promise来自 getDistance() 并在回调中解析相应的值:

export default class DistanceMatrixService {
  constructor(pickup, dropoff, garage) { /* ... */ }

  getDistance(arg1, arg2) {
    return new Promise((resolve, reject) => {
      this.distance.getDistanceMatrix({
        origins: [arg1],
        destinations: [arg2],
        travelMode: 'DRIVING',
        unitSystem: google.maps.UnitSystem.IMPERIAL
      }, response => {
        console.log(response) //actually returns desired response
        resolve(response.rows[0].elements[0].distance.text);
      }
      );
    });
  }
}

您还应该考虑使用 catch() 来根据需要处理错误。

希望有帮助!