javascript - 使用 IIFE 进行 AJAX 调用？似乎无法让 .done 与常规函数一样工作

Question

我目前有一个对 PHP 文件有效的 AJAX 调用，如下所示:

//Load map from database
function getMap(){
    return $.ajax({
    url: "getMap.php",
    type: "POST",
    dataType: 'JSON',
    });
};
getMap().done(function(r) {
    if (r) {
        loadedMap(JSON.parse(r.mapArray), JSON.parse(r.mapProperties)); //call     loadedMap(r) if loading a map from DB
    } else {
       console.log("No data");
    }
}).fail(function(x) {
   console.log("error");
});

它在单个 javascript 文件中工作，该文件成功地将 r.mapArray 和 r.mapProperties 传递到我的主 loadMap 函数。

我正在尝试了解 IIFE Javascript 模块模型，并将我的工作分成单独的文件。

所以，我目前有 main.js:

(function() {
  // let's get our map
  var gameMap = mapGen.getMap().done();
  console.log(gameMap);
})();

和mapGen.js:

var mapGen = function() {  
   return {
      getMap: function() {
        return $.ajax({
            url: "getMap.php",
            type: "POST",
            dataType: 'JSON',
        });
      }
   };
}()

如果我console.log(gameMap)，我会看到带有我的数据的responseText JSON对象。我似乎无法访问它。 console.log(gameMap.responseText) 未定义。 gameMap.responseJSON 也是如此(尽管我在控制台中看到了它们)。

Answer 1

查看代码看起来文件的分离不是问题，并且看起来实现正确。问题在于您如何处理 AJAX 请求。函数 mapGen.getMap() 实际上返回一个 jqXHR 对象，而不是您尝试访问的响应。

正如您在之前的文件中所做的那样，您需要处理请求的响应。

(function() {
  // let's get our map request
  var gameMap = mapGen.getMap();
  gameMap.done(function(r){ ... }).
  fail(function(x){ ... });
})();

您将能够在done()函数中访问您正在寻找的响应数据。