Question

我有一个javascript函数，可为客户收集GeoLocation数据。数据源是Laravel API：

public function GeoLocationList($officeid=NULL)
{

    $customers= Customers::where('office_id', $officeid);
    $paginate_count =  5;
    $customers= $customers->paginate($paginate_count);
    return $this->response->paginator($customers, new CustomerTransformer);
}

我正在使用GeoCod.io网站，并且不确定请求的并发限制是什么，或者由于某种原因它是否会因某些原因而出错，所以我认为我将对它们进行批处理，因为有数千条记录要打通。

几天前，当我在处理ajax请求时，我一直在尝试设置请求之间的超时/睡眠/延迟，但显然已弃用。我从Firefox控制台日志中获得了该信息，并被定向到：https://xhr.spec.whatwg.org/。我没有保存确切的文本，但这是为了改善用户体验...无论出于什么目的，我都无法弄清楚如何降低它的速度，并且我不想最终以一次有5,000个请求。

这是我用来获取坐标数据的JavaScript：

<?PHP 
$customer_json= json_encode($customers->toArray()); 
echo "var customers= ". $customer_json . ";\n";
  ?>
var results=[];
for(var i=0; i<customers.data.length; i++){
  var customer ={};

  if (customers.data[i]['address']){
    var customer_address = customers.data[i]['address'].replace(/ /g,"+") + "+";
    if (customers.data[i]['city']){
    customer_address += "+" + customers.data[i]['city'].replace(/ /g,"+");
    }
    if (customers.data[i]['state']){
    customer_address += "+" + customers.data[i]['state'].replace(/ /g,"+");

    }
    if (customers.data[i]['zip']){
    customer_address += "+" + customers.data[i]['zip'].replace(/ /g,"+");
    }
    var address = "https://api.geocod.io/v1.3/geocode?q=?" + customer_address + "&api_key=REMOVED";
    $.ajax({
        type : 'GET',
        url : address,
        dataType : "json",
        timeout: 1000,
        async: false,
        success: function(response){
          if(isEmpty(response["results"]) !=true){
            var location = response["results"][0]["location"];
            customer= { "customer_id":customers.data[i]["id"],"geo":{}};
            customer.geo = location;
            results[i]=customer;
          }
        }   
    });   
  }

}

我尝试使用事件处理程序，但是它最终陷入了无休止的循环

var ajaxRunning = false;
for(var p=1; p<=total_pages; p++){
  if(ajaxRunning == false){
    ajaxRunning=true;
    GetCustomerList(p);
    console.log( "Starting ajax. Page: " + p );

  }else{
    console.log( "Adding ajaxStop handler. Page: " + p );

    $( document ).ajaxStop(function() {
      console.log( "Triggered ajaxStop handler. Page: " + p );
      GetCustomerList(p);
    });
  }

}
function GetCustomerList(page) {           
  $.ajax({
    type: 'GET',
      url: '{{ url('api/customers/GeoLocationList') }}/1?paginate_count=' + pagination_count + '&page=' + page,
      dataType: 'json',
      success: function (data, status, xhr) {
        console.log(data.data);
      },
      error: function(xhr) {
        swal(xhr.responseJSON.message);
      },
      cache: false
  });
}

控制台会像这样吐出永无止境的信息，我们可以看到有关同步请求的错误。只有9页，但它一直在询问第10页，这就是为什么我得到一堆空数组的原因，但实际上它并没有问题，而是它无休止地循环并且没有等待它的事实。在每个之间完成：

Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user’s experience. For more help http://xhr.spec.whatwg.org/ jquery-3.2.1.min.js:4:15845
Starting ajax. Page: 1 100:1200:5
Adding ajaxStop handler. Page: 2 100:1203:5
Adding ajaxStop handler. Page: 3 100:1203:5
Adding ajaxStop handler. Page: 4 100:1203:5
Adding ajaxStop handler. Page: 5 100:1203:5
Adding ajaxStop handler. Page: 6 100:1203:5
Adding ajaxStop handler. Page: 7 100:1203:5
Adding ajaxStop handler. Page: 8 100:1203:5
Adding ajaxStop handler. Page: 9 100:1203:5
Array(1000) [ {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, … ]
100:1218:9
Triggered ajaxStop handler. Page: 10
100:1206:7
Array []
100:1218:9
Array []
100:1218:9
Array []
100:1218:9
Array []
100:1218:9
Array []
100:1218:9
Array []
100:1218:9
Array []
100:1218:9
Array []
100:1218:9
Triggered ajaxStop handler. Page: 10
100:1206:7
Array []
100:1218:9
Array []
100:1218:9
Array []
100:1218:9
Array []
100:1218:9
Array []
100:1218:9
Array []
100:1218:9
Array []
100:1218:9
Array []
100:1218:9

我如何以5-10个批次的间隔进行ajax调用？

Answer 1

来自geocod.io的Mathias。

我们没有任何硬费率限制，因此可以单独执行GET请求。

也就是说，由于减少了开销，因此使用批处理请求肯定会看到更快的处理速度。

您提到您正在使用Laravel。您是否考虑过使用JavaScript对服务器端而非客户端进行地理编码？当进行多次查找时，这通常是最好的解决方案。

请随时通过我们网站右下角的实时聊天与我们联系，以便我们为您提供实时帮助。

将Laravel Paginator与Ajax请求一起使用

1 个答案: