Javascript 通过JS模块模式返回ajax响应

更新： 我决定使用JS模块模式并不是为了“保持简单”，所以我放弃了它，使用jQuery的延迟对象来返回我正在寻找的数据。我真正需要的是加载一个JSON文件并填充一个对象。我只是想通过合并JS模块模式来显得过于花哨

非常感谢@kiramishima给出的正确答案

下面是完成的代码：

function getData(){
    var url = CONTEXT + "/json/myJsonFile.json";
    return $.getJSON(url);
}

getData()
    .done(function(data){
        myGlobalObj = data;
    })
    .fail(function(data){
        console.log("fetching JSON file failed");
    });

我想我在这里有点太花哨了。我正在加载一个JSON文件，并试图通过JS模块模式返回API。问题是，我认为我没有正确地履行承诺，我不知道如何解决它

以下是我的JSON：

{
    "result": {
        "one": {
            "first_key":"adda",
            "second_key":"beeb",
            "third_key":"cffc"
        },
        "two": {
            "first_key":"adda",
            "second_key":"beeb",
            "third_key":"cffc"
        }
    }
}

下面是我的JS模块实现：

var data = (function() {
    var url = "/json/dummy.json";
    var getAllData = function() {
        return $.getJSON(url, function(result){});
    };

    var promise = getAllData(); // the promise

    return {
        getFirstObjSecondKey:function() {
            return promise.success(function(data) {
                return data.result.one.second_key;
            });
        },
        getSecondObjThirdKey:function() {
            return promise.success(function(data) {
                return data.result.two.third_key;
            });
        },
    };
})();

问题是“getAllData（）”返回为未定义，我不知道为什么；该方法返回我应该能够在“done”函数中处理的承诺。我离这里有多远

---

谢谢你的帮助。这是我第一次使用JS模块模式

我不知道你有什么问题，但我用以下方法测试：

var getAllData = function() {
return $.getJSON('/json/dummy.json', function(result){})
}

getAllData().done(function(data){ console.log(data.result.one.second_key) }) // prints beeb

在这种情况下工作正常，但如果尝试以下方法：

var data = (function() {
    var url = '/json/dummy.json';
    var getAllData = function() {
        return $.getJSON(url, function(result){});
    };

    return {
        getFirstObjSecondKey:function() {
            getAllData().done(function(data) {
                return data.login;
            });
        },
        getSecondObjThirdKey:function() {
            getAllData().done(function(data) {
                return data.name;
            });
        },
    };
})();

data.getFirstObjSecondKey返回未定义的，然后可以传递匿名函数：

var data = (function() {
        var url = '/json/dummy.json';
        var getAllData = function() {
            return $.getJSON(url, function(result){});
        };

        return {
            getFirstObjSecondKey:function(callback) {
                getAllData().done(function(data) {
                    callback(data.result.one.second_key);
                });
            },
            getSecondObjThirdKey:function(callback) {
                getAllData().done(function(data) {
                    callback(data.result.two.third_key);
                });
            },
        };
    })();
var t; 
data.getFirstObjSecondKey(function(data){ 
//data should contain the object fetched by getJSON
console.log(data);  // prints beeb
t = data; // assign t
})
console.log(t) // prints beeb

---

其他解决方案，始终返回延迟对象

我不知道您有什么问题，但我使用以下方法进行测试：

var getAllData = function() {
return $.getJSON('/json/dummy.json', function(result){})
}

getAllData().done(function(data){ console.log(data.result.one.second_key) }) // prints beeb

在这种情况下工作正常，但如果尝试以下方法：

var data = (function() {
    var url = '/json/dummy.json';
    var getAllData = function() {
        return $.getJSON(url, function(result){});
    };

    return {
        getFirstObjSecondKey:function() {
            getAllData().done(function(data) {
                return data.login;
            });
        },
        getSecondObjThirdKey:function() {
            getAllData().done(function(data) {
                return data.name;
            });
        },
    };
})();

data.getFirstObjSecondKey返回未定义的，然后可以传递匿名函数：

var data = (function() {
        var url = '/json/dummy.json';
        var getAllData = function() {
            return $.getJSON(url, function(result){});
        };

        return {
            getFirstObjSecondKey:function(callback) {
                getAllData().done(function(data) {
                    callback(data.result.one.second_key);
                });
            },
            getSecondObjThirdKey:function(callback) {
                getAllData().done(function(data) {
                    callback(data.result.two.third_key);
                });
            },
        };
    })();
var t; 
data.getFirstObjSecondKey(function(data){ 
//data should contain the object fetched by getJSON
console.log(data);  // prints beeb
t = data; // assign t
})
console.log(t) // prints beeb

---

另一种解决方案是，始终返回延迟对象

kiramishima的答案是有效的，但它将回调与

Promise

s混合在一起。如果你使用的是承诺，你应该尽量不要把这两种风格混为一谈

您必须从函数中返回一个。请记住，承诺是可以链接的，也就是说，如果从

done

函数返回

Promise

，它将成为新的承诺

var data = (function() {
    var url = "/json/dummy.json";
    var getAllData = function() {
        return $.getJSON(url, function(result){});
    };

    return {
        getFirstObjSecondKey:function() {
            return getAllData().done(function(data) {
                return new Promise(function(resolve, reject){
                  resolve(data.result.one.second_key); 
                });
            });
        },
        getSecondObjThirdKey:function() {
            return getAllData().done(function(data) {
                return new Promise(function(resolve, reject){
                  resolve(data.result.one.third_key);
                });
            });
        },
    };
})();

data.getFirstObjSecondKey().done(function(secondKey) {
    console.log('Second key', secondKey);
});

---

kiramishima的答案是可行的，但它将回调与

Promise

s混合在一起。如果你使用的是承诺，你应该尽量不要把这两种风格混为一谈

您必须从函数中返回一个。请记住，承诺是可以链接的，也就是说，如果从

done

函数返回

Promise

，它将成为新的承诺

var data = (function() {
    var url = "/json/dummy.json";
    var getAllData = function() {
        return $.getJSON(url, function(result){});
    };

    return {
        getFirstObjSecondKey:function() {
            return getAllData().done(function(data) {
                return new Promise(function(resolve, reject){
                  resolve(data.result.one.second_key); 
                });
            });
        },
        getSecondObjThirdKey:function() {
            return getAllData().done(function(data) {
                return new Promise(function(resolve, reject){
                  resolve(data.result.one.third_key);
                });
            });
        },
    };
})();

data.getFirstObjSecondKey().done(function(secondKey) {
    console.log('Second key', secondKey);
});

---

不管你有多喜欢，你仍然不能从异步ajax调用返回数据；我们学到的教训是，不要想当然地试图返回一个API，该API将提供从响应中提取精确元素的方法。不管你有多想当然，你仍然无法从异步ajax调用中返回数据。我认为简单的解决方案是使用$.getJson（）的回调来填充全局对象；从中吸取的教训是，不要想当然地试图返回一个API，该API将提供从响应中提取精确元素的方法。在认为我找到了答案之后，我进行了更多的研究，并得出结论，您的答案是正确的！谢谢。在想到我找到了答案后，我做了更多的研究，得出结论，你的答案是正确的！谢谢。关于不要和回调混在一起的观点很好，谢谢。我喜欢你的方法，但为了保持简单，我决定放弃使用JS模块模式。我已经更新了我最初问题顶部的代码。关于不要与回调混合的观点很好，谢谢。我喜欢你的方法，但为了保持简单，我决定放弃使用JS模块模式。我已经更新了我最初问题顶部的代码。