Cache API in JavaScript - with just 20 lines of code.

let cache = {};
async function getData(url){
    let result = "";
    if(cache[url] !== undefined) return cache[url].value;

    await fetch(url)
    .then(response => response.json())
    .then(json => cache[url] = {time: new Date(), value: json});

    return cache[url].value;
}

// Interval to clear cache;
setInterval(function (){
    if(Object.keys(cache).length > 0){
        let currentTime = new Date();
        Object.keys(cache).forEach(key => {
            let seconds = currentTime - cache[key].time;

            if(seconds > 10000){
                delete cache[key];
                console.log(`${key}'s cache deleted`)
            }
        })
    }
}, 3000);

Now you can call your API's like this.

getData("https://jsonplaceholder.typicode.com/todos/1")
.then(data => console.log(data));

If there is a cache value of the current api call then it will return values from cache otherwise call the api and return data while adding the response to cache.

Preview

I'm assuming this is much better than RTK Query and React Query 😅.

Comments

[Sophia Nelson]

Thanks, great read.

[Diner Das]

Cool!

[Jose Gascon]

Nice post, thanks for sharing.
What do you think about integrating the clearing of the cache in the getData function?
Performance wise it should be very similar and the result is even more compact (just 10 lines 😄)

const cache = {};

async function getData(url){
  const currentTime = new Date();
  if(cache[url] !== undefined) {
    if((currentTime - cache[url].time) < 10000) return cache[url].value;
    delete cache[url];
  }
  await fetch(url)
    .then(response => response.json())
    .then(json => cache[url] = {time: currentTime, value: json});
  return cache[url].value;
}

[Rajesh Royal]

➕➕

[Ian Klek]

First rule of software development: see if it's been done before - don't reinvent the wheel. Check out the Cache interface, which would provide you with caching across browser sessions: developer.mozilla.org/en-US/docs/W...

[Rajesh Royal]

Chill out man, Its just an experiment of curiosity which I felt good to share.

[Aarav Reddy]

Nice post

[Rajesh Royal]

Thanks @aaravrrrrrr

[Eyal Shalev]

Note: if you need caching for production projects, I highly recommend searching for existing implementations (or at least existing algorithms).

Otherwise I have some notes:

1. The current implementation only accepts the URL. But usually the same URL is used with different parameters, http methods or headers. Because not all of the possible keys can be mapped, I recommend accepting a key, and a function (to be used if the key is missing).
2. Some data will need to be cached for different amount of time, so accepting a parameter for it is a good idea. That would mean using a setInterval for each key, or replacing the cache[key].time with a validUntil time object.
3. Because you are deleting the cache after a fixed point of time, there is no need to keep the cache centralized, and it will be easier to just implement a memoize function that deleted the cache after a certain amount of time.

function memoize(fn, delAfter = 1000000) {
  const missing = Symbol("missing");
  let cache = missing;
  return async () => {
    if (cache === missing) {
       cache = Promise.resolve(fn());
       setTimeout(() => cache = missing, delAfter);
    }
    return await cache;
  }
}
const foo = memoize(() => fetch("https://foo/bar", { method: " POST", body: JSON.stringify({bar:1}) }))

// Will only do a single fetch.
console.log(await foo(), await foo())

[Rajesh Royal]

restep++

[Omid]

Can I ask you why are you doing this:

await fetch(url)
    .then(response => response.json())
    .then(json => cache[url] = {time: new Date(), value: json})

Instead of this:

const response = await fetch(url)
cache[url] = { time: new Date(), value: response.json()

If you use await you can replace those .then and I think this is much more cleaner :D

[Rajesh Royal]

Good Improvement. I will update the code.

[Omid]

I think you can append .json() to this:

const response = await fetch(url).json()

(I didn't test it but I think it should work)
Happy to help you! :D

[Rajesh Royal]

No it cannot be done.

[Gohomewho]

Actually that doesn't work and you'll get an error.
Uncaught TypeError: fetch(...).json is not a function
Because fetch() return a promise, and it doesn't have a json method on it.

It should be like this.

const url = "https://jsonplaceholder.typicode.com/todos/1"
const data = await fetch(url).then((response)=>response.json())

or this

const response = await fetch(url)
const data = await response.json()

Note that calling response.json() also return a promise so you need to await it to get the result.

[Timothy Huang]

Great job. Thanks for sharing.

[Rajesh Royal]

👍👍

[Guillaume Gaulard]

What happen if you get the same data at the same url very closely, the first call didn't finished so you make two calls instead of one

[Rajesh Royal]

Didn't understand much, can you please explain a bit more.

[Shikhar]

Nice idea to use Memoized results.Thanks!!