How to cache XMLHttpRequest response in Javascript?

Question

I have a function that loads my html templates asynchronously:

loadTplAsync: function(path) {

        return 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);
        });
    }

How to extend this function to cache responses by browser?

Check this link stackoverflow.com/questions/28154796/…

Aman Rawat
– Aman Rawat

2017-01-08 19:18:47 +00:00
Commented Jan 8, 2017 at 19:18 — Aman Rawat
– Aman Rawat, Commented Jan 8, 2017 at 19:18
Have you tried using ServiceWorker, Cache API?

guest271314
– guest271314

2017-01-08 19:29:53 +00:00
Commented Jan 8, 2017 at 19:29 — guest271314
– guest271314, Commented Jan 8, 2017 at 19:29
mnot.net/cache_docs

Quentin
– Quentin

2017-01-08 19:33:52 +00:00
Commented Jan 8, 2017 at 19:33 — Quentin
– Quentin, Commented Jan 8, 2017 at 19:33

charlietfl · Accepted Answer · 2017-01-08 19:58:40Z

3

Assuming that what you mean by cache is not to repeat making same request during life cycle of that page load you could store the promise as a variable and return the same promise each time.

The first time a specific path is requested will make a new request, subsequent times only the stored promise will be returned

var promises ={};
loadTplAsync: function(path) {
        // create new promise if it doesn't already exist for path instance
        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];
    }

Note this is not a persistent cache and new requests would be made on subsequent page loads

edited Jan 8, 2017 at 19:58

answered Jan 8, 2017 at 19:32

charlietfl

172k14 gold badges125 silver badges154 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

K Pradeep Kumar Reddy Over a year ago

How to do the persistent cache ?

Collectives™ on Stack Overflow

How to cache XMLHttpRequest response in Javascript?

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related