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

Grab the code snippet from JSFiddle

What is the reasoning behind placing CDN links at the bottom of the index file?

In order to locate a matching element within an array in a JSON file and update it, you can use Node

Utilizing JQuery to extract data from a <select> dropdown menu

Encountering Issues with Ajax Request in the Google Play App

Synchronous execution of functions in Node.js

Issue encountered while trying to load electron-tabs module and unable to generate tabs within electron framework

Is there a way to retrieve the value from a select tag and pass it as a parameter to a JavaScript function?

To avoid TS2556 error in TypeScript, make sure that a spread argument is either in a tuple type or is passed to a rest parameter, especially when using

Incorporate the value of a JQuery variable within an HTML form

Comparing and highlighting words in strings using JavaScript

What is the best method for transforming a stream into a file with AngularJS?

When running npm install, the dist folder is not automatically generated

Ensuring model accuracy in Asp.Net Core prior to initiating an Ajax request via JavaScript

Is it better to include the Google Analytics code in the master page or on every individual page of an asp.net

Experiencing problems with npm and bower installations, along with deprecated modules while setting up angular-phonecat project

Enhancing data management with Vuex and Firebase database integration

Updates to Firebase data do not automatically reflect in Google Charts

Expiration Date of Third-Party Cookies

Trouble with Add To Cart feature in React app due to issues with Context API