Google Maps Directions Service，如何等待所有请求完成？

Question

我有一份技术人员列表，我需要这些技术人员来获取某个位置之间的单独驾驶时间。我一直在使用脚本在Google Sheets 中执行此操作，但我宁愿在我的 Web 应用程序中进行计算。这里当然有一些问题。一个是我不能只在 for 循环中发出这些请求而没有某种延迟，否则我会收到 over_query_limit 错误。另一个问题是我想要一种方法让用户知道所有请求都已完成，这就是我坚持的部分。我目前正在使用google-maps-react npm 包来完成此操作。

这是我目前拥有的：

TechDriveTimeTest(techs, kioskInfo){
        let result = []
        techs.forEach(tech => {
            if(tech.Address != "" && !tech.Notes.includes('Not')){
                result.push(tech);
            }
        })

        //console.log(result);

        let directionsService = new google.maps.DirectionsService();

        result.forEach((tech, index) => {
            let techAddress = tech.Address + " " + tech.City + " " + tech.State + " " + tech.Zip

            let req = {
                origin: techAddress,
                destination: 'some destination',
                travelMode: 'DRIVING'
            }

            this.GetTime(index, req, directionsService);

        })
    }

    GetTime(i, req, service){
        setTimeout(function(){
            service.route(req, function(res, status){
                if(status == 'OK'){
                   let time = res.routes[0].legs[0].duration.text
                   console.log(time);
                }
            })
        }, (i+1) * 1000)
    }

这段代码可以很好地延迟请求，这样我就不会再收到错误了，但如果知道所有请求何时完成，我可以通知用户。谢谢！

Answer 1

您可以使用递归来一次运行一个请求，这是一个示例：

function TechDriveTimeTest(techs, kioskInfo){
    techs = techs.filter(tech => tech.Address != "" && !tech.Notes.includes('Not'))
                 .map(tech => `${tech.Address} ${tech.City} ${tech.State} ${tech.Zip}`);

    const directionsService = new google.maps.DirectionsService();
    recursion();
    function recursion() {
        const techAddress = techs.shift();
        directionsService.route({
            origin: techAddress,
            destination: 'some destination',
            travelMode: 'DRIVING'
        }, function(res, status){
            if(status == 'OK'){
               let time = res.routes[0].legs[0].duration.text
               console.log(time);
            }
            if (techs.length) {
                setTimeout(recursion, 1000);
            } else {
                console.log('DONE');
            }
        });
    }
}

这里，recursion 从techs 数组中删除第一个元素，然后，当方向响应到来时，如果techs 数组中仍有元素，则再次调用recursion 函数。