如何记忆 jquery ajax 响应？答案

【问题标题】：How to memoize jquery ajax response?如何记忆 jquery ajax 响应？
【发布时间】：2018-09-03 15:28:43
【问题描述】：

我想缓存 jQuery AJAX 响应，这样我就不需要再次进行网络调用了。

下面是我的JS代码：

$(".btn").on("click", function(){
    var id = $(this).data("id");
    var url = "https://alert-carpenter.glitch.me/api/movies/"+id;
    var loadData = memoize(getDataById);

    var data = loadData(url);
    console.log(data);
    // $("#title").html(data.data.title);

});

function getDataById(url,cache){
    $.ajax({
        method:"GET",
        url: url,
        success:function (data){
            console.log("ajax data", data);
            console.log("cache",cache);
            cache[url] = data;     
        }
    });
}

function memoize(fn){
    var cache = {}

    return function(url){
        if(cache[url]!=undefined){
            console.log("loading from cache");
            return cache[url];
        }else{
            console.log("loading from server");
            fn(url,cache)

            return cache[url];
        }
    }
}

AJAX 调用正在获取响应，但它没有更新缓存响应。

我知道如果我将 Cache 变量设为全局变量，那么我可以简单地在 jquery ajax 成功函数中更新它。但我不想让缓存全局化。

所以我在这里尝试使用闭包。如有错误请指正。

【问题讨论】：

标签： javascript jquery ajax memoization

【解决方案1】：

问题在于，每次响应按钮按下时，您都会记住该功能。你有

$(".btn").on("click", function(){
    //...
    var loadData = memoize(getDataById);
    ... loadData(input) ...
});


function memoize(fn){
    var cache = {}

    return function(url){
        if(cache[url]!=undefined){
            console.log("loading from cache");
            return cache[url];
        }else{
            console.log("loading from server");
            fn(url,cache)

            return cache[url];
        }
    }
}

因此，当您调用 memoize 时，它正在构造一个可以访问新 cache 的新闭包并返回它。尝试在外面创建记忆的loadData：

var loadData = memoize(getDataById);

$(".btn").on("click", function(){
    //...
    ... loadData(input) ...
});

这样，同一个闭包和同一个缓存被多次调用。

【讨论】：

这很有帮助，但 cache[url] 返回未定义。
你能帮帮我吗？
啊，你的缓存代码不正确，你需要fn(url,cache)而不是cache[url] = fn(url)。

【解决方案2】：

感谢@Phil H 的帮助，我已经使用 Promises 解决了 undefind 错误。

function getDataById(url, cache) {

            return new Promise(function(resolve, reject){
                $.ajax({
                    method: "GET",
                    url: url,
                    success: function (data) {
                        console.log("ajax data", data);
                        console.log("cache", cache);
                        cache[url] = data;
                        resolve(data)
                    },
                    error:function(err){
                        reject(err);
                    }
                });
            });
        }

在服务器调用中

 else {
                    console.log("loading from server");
                    fn(url, cache).then(function(response){
                        console.log("response", response);
                         changeTitle(response);
                    });

【讨论】：