Thread

Emil Moe

Senior Data Engineer

Jun 12, 2019

Cache Axios

Axios is a Promise based HTTP client: github.com/axios/axios

I would like to implement a cache control for GET requests. So that I don't query the same URL twice during a page load. That would be a cache that works for 10-20 seconds.

I would like to implement it as transparent as possible. Right now I call Axios by window.axios.get(url).then(response => {}) and the best would be to override the .get() method to inject the cache system.

#javascript #axios

Responses(1)

I wrote a cache system once, which works like this:

Start by calculating a hash from all arguments which are important for the request, so that you only cache same requests and not slightly differing ones, which would lead to problems.
Check your cache (a simple Map should work) if it contains the result data and when the call was made (timestamp)
If not, check a second Map, which buffers in-transit request Promises
If there is no entry, make the actual call. In any case, create a Promise and store an array with the next item containing refs to the Promise's resolve and reject methods.
Once the call finishes, resolve (or reject) all Promises by calling the correct method from the buffer Map.
Last but not least, store the result in the cache Map together with a timestamp.

Hashing the parameters should be simple, if you JSON-stringify them and then use something like this for the hash:

// stackoverflow.com/a/34842797
const hash = str => str.split('').reduce((prevHash, currVal) =>
    (((prevHash << 5) - prevHash) + currVal.charCodeAt(0))|0, 0);

Emil Moe my code is in a module, so I just put it as a variable there (and away from the users' grasps...). If you want to go a little more light-weight, just create a closure:

(axios => {
  const buffer = new Map();
  const cache = new Map();
  const originalGet = axios.get;

  axios.get = (url, config) => {
    // 1. calculate hash
    const hash = calcHash(arguments);
    // 2. check cache
    if (cache.has(hash)) { /* ... */ }
    // 3. check buffer
    if (buffer.has(hash)) { /* ... */ }
    // 4. make call (?) and add to buffer
    originalGet
      .apply(axios, arguments)
      .catch(err => {
        // 5. reject buffer
        buffer.get(hash).forEach(defer => defer.reject(err));
        buffer.delete(hash);
      })
      .then(data => {
        // 5. resolve buffer
        buffer.get(hash).forEach(defer => defer.resolve(data));
        buffer.delete(hash);
        // 6. update cache
        cache.set(hash, { data, timestamp: Date.now() });
      });
  };
})(window.axios);

Search Hashnode

Cache Axios

Responses(1)

Recent threads