#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
ожидает, пока все эти обещания не будут выполнены.