Как запомнить ответ jquery ajax? - PullRequest
Новая
       8

Как запомнить ответ jquery ajax?

0 голосов
/ 03 сентября 2018

Я хочу кешировать ответ 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. но я не хочу делать Cache глобальным.

поэтому здесь я пытаюсь использовать замыкание. Пожалуйста, исправьте меня, если есть какая-либо ошибка.

Ответы [ 2 ]

0 голосов
/ 04 сентября 2018

Спасибо за помощь @Phil H, мне удалось устранить ошибку undefind с помощью 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);
                    });
0 голосов
/ 03 сентября 2018

Проблема в том, что вы запоминаете функцию каждый раз, когда отвечаете на нажатие кнопки. У вас есть 

$(".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) ...
});

Таким образом, это то же самое закрытие с тем же кешем, который вызывается несколько раз.

...