来自 javascript 回调的多个 returns

Question

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

我想使用多个 getJSON 调用，然后在同一张地图上显示为不同的图层。我的问题是如何让回调与 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);

   });

我已经尝试遵循需要回调 returns 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 的第二个参数的目的......这是请求

中 sent 的数据

您还在调用第一个参数为 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 returns 一个 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
});

来自 javascript 回调的多个 returns

Multiple returns from a callback in javascript

javascript

callback

getjson