使用Google Maps API延迟每个请求的Ajax函数

Question

我想使用Google Places API获取有关地点的一些数据。 问题是，我想从我要查找的每个城市的1000多个记录中获取数据。

我正在搜索比萨店，我想要我定义的区域中的所有比萨店。 所以我有一个像这样的数组：

['Pizzeria+Paris','Pizzeria+Marseille','Pizzeria+Nice','Pizzeria+Toulouse']

我的目标是提出一个请求，然后等待3秒（或更长时间），然后处理第二个请求。 我正在使用Lodash库来帮助我进行迭代。

这是我的代码：

function formatDetails(artisan){
  var latitude = artisan.geometry.location.lat;
  var longitude = artisan.geometry.location.lng;
  var icon = artisan.icon;
  var id = artisan.id;
  var name = artisan.name;
  var place_id = artisan.place_id;
  var reference = artisan.reference;
  var types = artisan.types.toString();

  $('#details').append('<tr>'+
  '<td>'+latitude+'</td>'+
  '<td>'+longitude+'</td>'+
  '<td>'+icon+'</td>'+
  '<td>'+id+'</td>'+
  '<td>'+name+'</td>'+
  '<td>'+place_id+'</td>'+
  '<td>'+reference+'</td>'+
  '<td>'+types+'</td>'+
  '</tr>');
} 

var getData = function(query, value){
 $.ajax({
      url: query,
      type: "GET",
      crossDomain: true,
      dataType: "json",
      success: function(response) {
        var artisan = response.results;
        console.log(artisan);
        for (var i = 0; i < artisan.length; i++){
          formatDetails(artisan[i]);
          setTimeout(function(){console.log('waiting1');},3000);
        }
        setTimeout(function(){console.log('waiting2');},3000);
      },error: function(xhr, status) {
        console.log(status);
      },
      async: false
    });  
}




$(document).ready(function(){

var places =
['Pizzeria+Paris','Pizzeria+Marseille','Pizzeria+Nice','Pizzeria+Toulouse'];

  _.forEach(places, function(value, key) {
    var proxy = 'https://cors-anywhere.herokuapp.com/';
    var target_url = 'https://maps.googleapis.com/maps/api/place/textsearch/json?query='+value+'&key=AIzaSyAClTjhWq7aFGKHmUwxlNUVBzFpIKTkOrA';
    var query = proxy + target_url;
    getData(query, value);
  });




}); 

我尝试了很多关于stackoverflow的解决方案，但是没有人在工作，否则我可能做错了。

谢谢你的帮助！

Answer 1

$.ajax返回Promise的事实使得此操作非常简单

首先，您希望getData返回$.ajax并摆脱async:false

var getData = function(query, value) {
    return $.ajax({
        url: query,
        type: "GET",
        crossDomain: true,
        dataType: "json",
        success: function(response) {
            var artisan = response.results;
            for (var i = 0; i < artisan.length; i++){
                formatDetails(artisan[i]);
            }
        },error: function(xhr, status) {
            console.log(status);
        }
    });  
}

然后，您可以使用Array.reduce遍历数组，并将请求链接在一起，每个请求后都有3秒的“延迟”

像这样：

$(document).ready(function(){
    var places = ['Pizzeria+Paris','Pizzeria+Marseille','Pizzeria+Nice','Pizzeria+Toulouse'];
    places.reduce((promise, value) => {
        var proxy = 'https://cors-anywhere.herokuapp.com/';
        var target_url = 'https://maps.googleapis.com/maps/api/place/textsearch/json?query='+value+'&key=AIzaSyAClTjhWq7aFGKHmUwxlNUVBzFpIKTkOrA';
        var query = proxy + target_url;
        return promise.then(() => getData(query, value))
            // return a promise that resolves after three seconds
        .then(response => new Promise(resolve => setTimeout(resolve, 3000)));
    }, Promise.resolve()) /* start reduce with a resolved promise to start the chain*/
    .then(results => {
        // all results available here
    });
});

Answer 2

最有效的答案是@jaromandaX中的答案。 不过，我还发现了Google Chrome浏览器的解决方法，它可以帮助您避免兑现承诺。

在Chrome上：
1.打开控制台
2.转到网络标签
3.在选项“保留日志”和“禁用缓存”附近，您有一个带有箭头的选项，您将在其中看到标签“无节流”。
4.单击标签旁边的箭头，然后添加。
5.您将能够设置下载和上传速度，最重要的是，每个请求之间的延迟。

Kaboom，使用我的初始代码。

尽管如此，我还是更改了代码以适合上述答案，从代码，速度等方面来看，这样做更好。

谢谢