从类导出Google Distance Matrix时async-await不起作用 [英] async-await not working when exporting Google distance Matrix from a class

问题描述

我正在使用Google地方信息自动填充功能和距离矩阵来放置两个位置并打印出两个位置之间的距离.我有两个javascript es6类将Google API作为服务分开.

I'm using the google places autocomplete and the Distance Matrix to put two locations in and print out the distance between the two. I have two javascript es6 classes to separate the Google API's as services.

我的问题是我试图等待从距离矩阵服务获取距离的响应，然后将其记录到控制台，但是登录时却无法定义.我记录后，距离矩阵服务正在返回响应.这必须表示我在该方法中的等待无法正常工作.我在做什么错了?

My problem is I'm trying to await the response on getting the distance from the distance matrix service then log it to the console, but I get undefined when I log it. the distance matrix service is returning the response after I log it. This must mean that my await in the method is not working. What am I doing wrong?

distanceMatrix.js

distanceMatrix.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).这应该是另一种方式.

I expect the console.log(ptd) to wait for distanceMatrix.getDistance() to finish, but the actual results is ptd is logged as undefined then console.log(response) from the distance matrix is logged out next. This should be the other way around.

推荐答案

承诺，尝试以下方法从getDistance()开始，并在回调中解析相应的值:

async/await works with promises and will not work with a callback. Try the following instead by returning a promise from getDistance() and resolving the respective value from within the callback:

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()来处理错误.

You should consider using catch() as well to handle errors as necessary.

希望有帮助！

这篇关于从类导出Google Distance Matrix时async-await不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！