如何记忆 jquery ajax 响应？

Question

我想缓存 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 成功函数中更新它。但我不想让缓存全局化。

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

Answer 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 并返回它。尝试在外部创建 memoized loadData：

var loadData = memoize(getDataById);

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

这样它就是同一个闭包和被调用多次的同一个缓存。

Answer 2

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

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);
                    });

如何记忆 jquery ajax 响应？

How to memoize jquery ajax response?

javascript

ajax

jquery

memoization