Comment by Marco Alka on "Cache Axios"

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

(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);

Thanks. I got something to work now. Not sure if it is as pretty as yours, but it seems to work without having to make changes to existing code.

let calcHash = function(s) {
    for(var i = 0, h = 0xdeadbeef; i < s.length; i++)
        h = Math.imul(h ^ s.charCodeAt(i), 2654435761)
    return (h ^ h >>> 16) >>> 0
}

let cache = new Map()
let buffer = new Map()

window.axios.get = (url, config) => {
    let hash = calcHash(url + JSON.stringify(config))

    if (cache.has(hash)) {
        return new Promise((resolve, reject) => {
            resolve(cache.get(hash))
        })
    }

    if (buffer.has(hash)) {
        return buffer.get(hash)
    }

    buffer.set(
        hash,
        window.axios.request(Object.assign(config || {}, {
            method: 'GET',
            url: url
        }))
    )

    buffer.get(hash).then(response => {
        cache.set(hash, response)
        buffer.delete(hash)
    })

    return buffer.get(hash)
}

Search Hashnode