javascript - javascript 中回调的多次返回

Question

我正在使用 getJSON 从数据库中获取数据，然后使用 Leaflet 将其显示到 map 上。

我想使用多个 getJSON 调用，然后将它们显示为同一张 map 上的不同图层。我的问题是如何让回调与 getData 函数中的多个 geoJSON 调用一起使用。或者(我不确定哪种方法更好)- 拥有 getData 函数的多个版本，然后能够访问所有版本以形成层。

对于单个 getJSON，以下工作有效:

function getData(callback) {
   $.getJSON("getData.php", callback );
}

getData(function(data) {
   let markerlist = [];

   for (let i = 0; i< data.length; i++) {
      let location = new L.LatLng(data[i].siteLat, data[i].siteLon);
      let marker = new L.Marker(location, {
         icon: myIcon,
         title: 'thetitle' });

         markerlist.push(marker);
      }

      let myLayerGroup = L.layerGroup(markerlist) // create the layer
      map.addLayer(myLayerGroup); // add the layer to the map

      var overlays = {"layername":myLayerGroup};
      L.control.layers(baseLayers,overlays).addTo(map);

   });

我尝试关注Need callback returns multiple values in nodejs ，看起来很相似，但没有成功。

我尝试过:

function getData(callback) {
   let callbackString = {};
   $.getJSON("getData.php", callbackString.set1);
   $.getJSON("getOtherData.php", callbackString.set2);
   callback(null,callbackString);
}

getData(function(data) {
   let data1 = data.set1;
   let data2 = data.set2;
   let markerlist = [];

   for (let i = 0; i< data1.length; i++) {
      let location = new L.LatLng(data1[i].siteLat, data1[i].siteLon);
      let marker = new L.Marker(location, {
         icon: myIcon,
         title: 'thetitle' });

         markerlist.push(marker);
      }

      let myLayerGroup = L.layerGroup(markerlist) // create the layer
      map.addLayer(myLayerGroup); // add the layer to the map

      var overlays = {"layername":myLayerGroup};
      L.control.layers(baseLayers,overlays).addTo(map);

   });

给出了错误TypeError: null is not an object (evaluating 'data.set1')

我不知道从哪里开始拥有多个版本的 getData，然后访问数据函数中的所有信息。

Answer 1

这段代码

let callbackString = {};
$.getJSON("getData.php", callbackString.set1);
$.getJSON("getOtherData.php", callbackString.set2);
callback(null,callbackString);

.set1 和 .set2 将是未定义的，因为您刚刚将 callbackString 创建为空对象!我认为您误解了 getJSON 第二个参数的目的...这是请求中发送的数据

您还使用第一个参数为 null 来调用回调 - 但您尝试使用 getData ，例如

getData(function(data) { ...

因此，data 将始终为 null

此外，$.getJSON 是异步，并且您的代码不会等待请求完成 - 因此您没有机会访问结果

也许这会有所帮助

function getData(callback) {
   $.when($.getJSON("getData.php"), $.getJSON("getOtherData.php")).then(function(set1, set2) {
        callback({set1:set1, set2:set2});
   });
}

<小时/>

但是，如果您想要正确的错误处理，那么您可以执行类似的操作

function getData(callback) {
   $.when($.getJSON("getData.php"), $.getJSON("getOtherData.php"))
   .then(function(set1, set2) {
        callback(null, {set1:set1, set2:set2});
   })
   .catch(function(err) {
       callback(err);
   });
}


getData(function(err, data) {
    if (err) {
        //handle error
    } else {
        let data1 = data.set1;
        let data2 = data.set2;
        let markerlist = [];
        ...
        ...
    }
});

<小时/>

就我个人而言，因为 $.getJSON 返回一个 Promise(嗯，jQuery 版本的 Promise)，所以我更有可能编写如下代码:

const getData = () => Promise.all([$.getJSON("getData.php"), $.getJSON("getOtherData.php")]);

getData()
.then(([data1, data2]) => { // note that data1, data2 are now the arguments to the function
    let markerlist = [];
    for (let i = 0; i< data1.length; i++) {
    ...
    ...
    }
})
.catch(err => {
    // handle errors here
});