React jQuery AJAX global caching

Question

I am developing React application and for frontend AJAX requests I use jQuery, but I want to cache my requests like angular http.get(url, {cache: true }) does. Is there any way which can help me do this global caching for GET requests. I tried to add cache: true property to request but it seems not working.

For example my code looks like this

$.ajax(source, {
    method: 'GET',
    data: {
        c: count,
        p: period
    },
    cache: true,
    success: (response) => {

    }
})

I have tried also

$.ajaxSetup({
    cache:true
});

for all requests, but unfortunatley I can see request under Chrome devtools network tab, as well as in my server logs. So I want to prevent from doing same request if data and url is same. I can create some storage myself, but I think there should be default way for doing this.

Thanks in advance!

but `cache: true` is not working, I can see requests in devtool network tab, as well as in my server logs — Aren Hovsepyan, Apr 16 '17 at 17:25

score 0 · Answer 1 · answered Apr 16 '17 at 18:32

One approach could be checking if the last request data are the same than the current.

var lastRequestedData = {};
function myAjaxRequest(requestData) {
    if (JSON.stringify(requestData) != JSON.stringify(lastRequestedData)) {
        lastRequestedData = requestData;
        alert('Makes the ajax request: '+ JSON.stringify(requestData));
        //$.ajax(...)
    }
}

myAjaxRequest({"c":1,"p":2}); // Fire
myAjaxRequest({"c":1,"p":2}); // Not fire
myAjaxRequest({"c":2,"p":3}); // Fire

React jQuery AJAX global caching

1 Answers1