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!

Answer 1

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