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

Return ajax response via JS Module pattern

本文关键字：ajax 响应 返回 模式 JS 模块 通过      更新时间：2023-09-26

更新：我决定使用 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"函数中处理的Promise。我离我有多远？

感谢您的任何有用意见。这是我第一次弄乱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 返回 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

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

Kiramishima的答案有效，但它将回调与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);
});
相关文章：