Avoiding race conditions in JS

May 2019

Race conditions?! Javascript?! It’s a real thing, I promise!

Let’s say you have some service that loads a User object from your API. You back the getById method with a cache because you’re a responsible developer, and you share a single instance across several locations in your app because you want those sweet, sweet cache hits. UserService might look something like this:

class UserService {
    private readonly userCache: Map<string, User> = new Map()

    async getById(id: string): Promise<User> {
        let user = this.userCache.get(id)
        if (user) return user

        user = await this.fetchById(id)
        this.userCache.set(id, user)
        return user
    }

    private async fetchById(id: string): Promise<User> {
        const response = await fetch(`/users?id=${id}`);
        return User.deserialize(response.body);
    }
}

Looks pretty good, right? Can you spot the bug?

It’s a little hard to trigger. Let’s say that you have two consumers of this api. Imagine the first fires of a request for user 10. Then, while that request is still in flight, another consumer fires off a request for that same user. Since the service is backed by a cache you’re happy to fire off requests willy-nilly.

What happens is there are two requests that end up in flight, wasting precious time. Here’s a visual:

So much wasted time! Luckily, the fix is pretty simple. Instead of caching the User, why don’t we cache the promise instead?

class UserService {
-   private readonly userCache: Map<string, User> = new Map()
+   private readonly userCache: Map<string, Promise<User>> = new Map()

    async getById(id: string): Promise<User> {
        let user = this.userCache.get(id)
        if (user) return user

-   user = await this.fetchById(id)
+   user = this.fetchById(id)
        this.userCache.set(id, user)
        return user
    }

    private async fetchById(id: string): Promise<User> {
        const response = await fetch(`/users?id=${id}`);
        return User.deserialize(response.body);
    }
}

That’s seriously all it takes. Due to implicit flattening of promises*, we don’t have to change anything else. Here’s how those requests look now that we’re caching the promises rather than the values:

• When I say implicit flattening, I am referring to the fact that native promises, when nested, are flattened so that they become a single promise. That is, Promise.resolve(Promise.resolve(10)) is not of type Promise<Promise<number>>, it’s actually just Promise<number>. Since return values from async functions are injected into promises, this means that promises returned from async functions are also flattened. That means the following two functions are effectively equivalent:

async function random(): Promise<number> {
    return Math.random()
}

// is the same as ...

function random(): Promise<number> {
    return Promise.resolve(Math.random())
}