Can you provide some insight on how to store XMLHttpRequest response in Javascript for future

Question

Can you provide some insight on how to store XMLHttpRequest response in Javascript for future

I have a function in my codebase that is responsible for loading HTML templates asynchronously:

loadTemplate: function(url) {
        return new Promise(function(resolve, reject) {
            var xhr = new XMLHttpRequest();
            xhr.open("GET", url, true);
            xhr.onload = function() {
                if (xhr.readyState === 4) {
                    if (xhr.status === 200) {
                        resolve(_.template(xhr.responseText));
                    } else {
                        reject(xhr.responseText);
                    }
                }
            };
            xhr.onerror = function(error) {
                reject(error);
            };
            xhr.send(null);
        });
    }

I am now seeking advice on how to enhance this function by implementing response caching within the user's browser. Any suggestions or tips would be greatly appreciated!

javascript ajax templates caching

Answer 1

Answer №1

If by "cache" you are referring to avoiding redundant requests during the lifespan of a page load, one approach is to store the promise in a variable and return it whenever needed.

When a specific path is first requested, a new request is made. Subsequent requests for the same path will simply return the stored promise.

var promises ={};
loadTplAsync: function(path) {
        // create a new promise only if it doesn't already exist for the given path
        if(!promises[path]){
          promises[path] = Q.Promise(function(resolve, reject) {
            var xhr = new XMLHttpRequest();
            xhr.open("GET", path, true);
            xhr.onload = () => {
                if (xhr.readyState === 4) {
                    if (xhr.status === 200) {
                        resolve(_.template(xhr.responseText));
                    } else {
                        reject(xhr.responseText);
                    }
                }
            };

            xhr.onerror = error => reject(error);
            xhr.send(null);
        });
      }
      // return the stored promise
      return promises[path];
    }

It's important to note that this method does not constitute a persistent cache; new requests will be made upon subsequent page reloads.

Answer 2

If by "cache" you are referring to avoiding redundant requests during the lifespan of a page load, one approach is to store the promise in a variable and return it whenever needed.

When a specific path is first requested, a new request is made. Subsequent requests for the same path will simply return the stored promise.

var promises ={};
loadTplAsync: function(path) {
        // create a new promise only if it doesn't already exist for the given path
        if(!promises[path]){
          promises[path] = Q.Promise(function(resolve, reject) {
            var xhr = new XMLHttpRequest();
            xhr.open("GET", path, true);
            xhr.onload = () => {
                if (xhr.readyState === 4) {
                    if (xhr.status === 200) {
                        resolve(_.template(xhr.responseText));
                    } else {
                        reject(xhr.responseText);
                    }
                }
            };

            xhr.onerror = error => reject(error);
            xhr.send(null);
        });
      }
      // return the stored promise
      return promises[path];
    }

It's important to note that this method does not constitute a persistent cache; new requests will be made upon subsequent page reloads.

Can you provide some insight on how to store XMLHttpRequest response in Javascript for future

Answer №1

Similar questions

Navigating the authorization header of an API request in a Node environment

Text that disappears upon clicking on show/hide按钮

Utilizing Various Styles within a single Google Sheets Cell

Transform a flat 2D shape into a dynamic 3D projection using d3.js, then customize the height based on the specific value from ANG

Ways to retrieve my PHP output and display it on a page using Ajax

Is there a way I can utilize canvas to overlay one image onto another?

numerous sections within a solitary webpage

Whenever a query is entered, each letter creates a new individual page. What measures can be taken to avoid this?

Is there a way to begin using the :nth-child() selector from the last element instead of the first?

Enforce the instantiation of static members in a template

Unraveling the Mystery of jQuery Syntax

Having trouble with GSAP CDN not functioning properly in your JavaScript or HTML document?

Please be patient for the PayPal script to load on the nextjs page

Identical HTML elements appearing across multiple DOM pages

Using setInterval() does not automatically fetch JSON data at a specified interval for me

React Modals: Only the modal component triggered by the first click will open, with no other modals opening

Determine in Node.js whether a variable is present in the request object for each page the user visits

Press a single button to toggle between displaying and hiding the table

Interacting with a WebGL globe: accessing database information and displaying pop-up windows when clicking on specific locations on the globe

What code can I use to prompt clients to refresh JavaScript files automatically?