Question

我正在申请。应用程序发出两个请求，第一个是MapBox API加载地图，第二个是Yelp Fusion API（通过我的节点服务器）。通过限制测试，我发现MapBox调用大约需要花费1/2的时间来完成Yelp调用。

我对如何管理这两个请求感到有点困惑。我加载一个然后下一个吗？我是否同时加载它们然后创建两个输入函数来解释首先加载Yelp /首先加载MapBox？

以下是我的代码目前的结构：

      // -------------------------- // Yelp API Call // ------------------------- //
$.ajax({
    type: 'POST',
    data: {
      "food_type": getParameterByName('type', window.location.href),
      "geolocation": false,
      "long": -1,
      "lat": -1,
      "radius": 1000,
      "limit": 30
    },
    success: function(response) {
      YelpCallback(response);
    },
    error: function(xhr) {
      console.log("Failure");
      console.log(xhr)
    },
    url: POST_baseurl + "yelp"
  });


  // -------------------------- // MapBox API Call // ------------------------- //
  mapboxgl.accessToken = 'pk.eyJ1IjoiamVyZW15c21vcmdhbiIsImEiOiJjaWxjemtvYWEzejR4dHlseGlkaGZmb2t5In0.BOYaLR5RW0tbUPTFuz5Y0g';
  var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/jeremysmorgan/cixxc3h1i00232rqjeeagcb2l',
    center: [lat, long],
    zoom: 13
  });
  map.on('load', function(e) {
    var map_load_time = new Date().getTime() - map_start_time;
    console.log("map_load_time: " + map_load_time);

    MapCallback(e);
  });

    function YelpCallback(data) {
  yelp_loaded = true;
  yelp_data = data;
  if (map_loaded) {
    main();
  }
}

function MapCallback(e) {
  map_loaded = true;
  if (YelpCallback) {
    main();
  }
}

Answer 1

这样的事情应该有效。阅读回调（正确的），他们非常有帮助。 http://cwbuecheler.com/web/tutorials/2013/javascript-callbacks/

function YelpAjax(callback)
{
  $.ajax({
    //yelp request,
    success: function(response){
      callback(response); //once done, call this argument with parameter: response
    }
  });
}

map.onload('load', function(e){
  //same stuff

  YelpAjax(function(response){ //this anonymous function is the argument.
    main();
  })
})

在带回调的函数中包含您的Yelp AJAX请求。将此功能放在map.onload中。之后请致电main()。

它有效地将main()置于您的Ajax成功之中，但使用较少的字面嵌套。

$.ajax({
  //yelp request,
  success: function(response){
    main();
  }
});

您还可以尝试使用异步库，它允许您非常优雅地控制异步函数，但在处理类似的事情之前，您可能需要先刷新。 http://caolan.github.io/async/

正确的异步请求处理 - JS

1 个答案: