Как работать с вызовами API карт Google внутри цикла for

#javascript #vue.js

#javascript #vue.js

Вопрос:

У меня есть массив прямоугольных границ, по которым я хочу искать рестораны с помощью Javascript API Google Places.

Сначала я думал о повторении массива boundaries с for циклом. Проблема в том, что на каждой итерации я буду выполнять асинхронный вызов API, а for цикл — это синхронное действие.

В идеале я хотел бы выполнить итерацию по всем границам с разницей в одну минуту между каждым вызовом API и завершить поиск по всем границам, возможно, с помощью setInterval , но я не могу полностью разобраться в этом.

Как я могу это сделать?

 loopSearch(zoneBoundaries)
    {
        for (var i = 0; i <= zoneBoundaries.length; i  )
        {
            const self = this;

            var bounds = new google.maps.LatLngBounds(
                new google.maps.LatLng(zoneBoundaries[i].sw),
                new google.maps.LatLng(zoneBoundaries[i].ne)
            );

            self.placesService = new google.maps.places.PlacesService(self.map);

            var request = { bounds: bounds, types: [ 'restaurant', 'bar'] };

            self.placesService.search(request, self.placesCallback);
        }
    },
  

Ответ №1:

Одним из простых решений является использование Promise all и await вместе с map для перебора координат внутри границы зоны

 await Promise.all(
  zoneBoundaries.map(async (val, index) => {
            var bounds = new google.maps.LatLngBounds(
                new google.maps.LatLng(zoneBoundaries[index].sw),
                new google.maps.LatLng(zoneBoundaries[index].ne)
            );

            self.placesService = new google.maps.places.PlacesService(self.map);

            var request = { bounds: bounds, types: [ 'restaurant', 'bar'] };
            const response = await self.placesService.search(request, self.placesCallback);
            const result = response.json()
            console.log(result)
  })
);
  

Преимущество использования вышеуказанного подхода заключается в том, что map переходит к следующему элементу, как только возвращается обещание, и Promise.all ожидает, пока все эти обещания не будут выполнены.