Mutex solution for concurrent AXIOS requests

Avoid chaos by implementing proper control

If there are concurrent API calls in your application where you want to implement a mutex solution to control the order of requests, you can use this lock service solution to implement it.

Before we start here’s a link to git-repo with all the code and example from this article. Feel free to checkout/use/fork.

lokeshpathrabe/APILockService

Let me give some background first.

Let’s say our app needs an API token to be passed in headers for authorization. We would want to fetch this token before any APIs are triggered from the browser. If these APIs are concurrent then we need some locking mechanism which could wait for the apiToken to be fetched and then call other APIs.

Let’s implement this solution and call it APILockService.

First, we create axios instance

Use a request interceptor called apiRequestLockInterceptor that checks for lock-on APIService and waits until the lock is released.

Notice that the isLocked() method accepts the axios config as arguments.

Now let's create the APILockService.

The code is pretty simple, let's go through the main parts.
When any API places lock on APILockService, we check if its already locked and do not allow the lock if it's true. The lock method accepts a token in arguments called lock token.

Why lockToken?
We take a lockToken as an identifier of request that placed the lock. The locking request will store this token in its axios config. When service is locked and the API calls isLocked() we return false if the lockToken is present in axios config. For other APIs, we return true. This ensures that the API that placed the lock is allowed to pass through while blocking others.

The following API requests will use waitTillUnlocked() to wait for the lock to release. This method returns a promise which resolves when the lock is released by locking API.

Maximum lock time
If locking API timeout or developer forgets to release the lock, the lock should be released after 5 min, as set in setTimeOut() of waitTillUnlocked().

Now that our lock service is ready, let's solve the original problem of app token. Let's create an axios request that will fetch us apiToken.

Notice that we save the lockToken in axios config.

Let's create another request which will fetch app data for us.

Normally, if we wanted to implement this we would need to do something like this.

getAppToken() 
.then(() => {
  return getAppDate(); 
})

But with APILockService we call these APIs like below and the service makes sure app data is requested after the lock is released from by getAppToken call.

// ........ in main app js ....... 
getAppToken(); 
getAppData();

Thanks for reading :)