Question

更新：我决定使用JS模块模式不是＆＃34;保持简单＆＃34;，所以我废弃它并使用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;
            });
        },
    };
})();

问题在于＆＃34; getAllData（）＆＃34;回归未定义，我不确定为什么;该方法返回一个我应该能够在＆＃34; done＆＃34;中处理的Promise。功能。我有多远？

感谢任何有用的输入。这是我第一次搞乱JS Module Pattern。

Answer 1

我不知道你的问题是什么，但我测试的是：

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返回undefined，然后你可以传递匿名函数：

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

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

Answer 2

kiramishima的答案有效，但它将回调与Promise混合在一起。如果你正在使用promises，你应该尽量不要混合使用两种风格。

您必须从函数中返回Promise。请记住，promises可以被链接，也就是说，如果你从Promise函数返回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);
});

通过JS Module模式返回ajax响应

2 个答案: