Javascript Service Wrapper for Browsers and NodeJS

Photo by Isabella and Zsa Fischer on Unsplash

Sometimes you need to pass your service functions from a shared pipe and call some actions on all of them. Or maybe you want to add all of your services to a queue that supports parallel and pending tasks.

Needs that I mentioned above are common, especially when you are using an http-request client like axios, fetch, or superagent. Lots of the fetching could fire at the same time and if you want to check a common situation for all of them, it could be very frustrating.

In these conditions, you can use JS Service Wrapper. A promise based service wrapper with queue support that works on browsers and NodeJS environment.

Full Example of JS Service Wrapper

This will be the console result of the above example:

There are three wrapped services. Each of them has its unique id in the queue but ID starts with the real position index in the queue. As you can see above, all services added to the queue on its turn. When the first service added, it fires because it’s first of the queue too.

The second service will add to the queue after the first one, but it’s not parallel, so it must wait until it turns. After the second, the third one, the only parallel service should add to the queue. It fires immediately when added to the queue because it’s parallel. When all added, the first one resolves and removes from the queue, and the second service that is pending should fires. Each of the services will remove from the queue after done.

Getting Started

First, you need to import js-service-wrapper in your project.

ServiceWrapper is the main object of our utility. You need to initialize it, and it's enough to init it once in your project.

The client that you set on the ServiceWrapper is the most important part of the initialization. It will be called inside the ClientHandler, and it will return a promise. Here is an example of wrapping. This code will call axios as client because we send it on init as the client value.

We have the chance to interrupt the above normal flow in different stages. We use hooks to do this. Let’s set some hooks to the service wrapper.

These two hooks will call on all wrappers. the first one will get the result and return the data property of that and the second one just receives the result after client-promise succeed and log it.

There are six pre-defined hooks that you can set them to the ServiceWrapper or on each ClientHandlers to affect the services.

1. HOOKS.BEFORE_FIRE calls before client service calling, but this hook is not async, and the fire will not wait for this.
2. HOOKS.BEFORE_RESOLVE calls when the service client promise is resolving and the value that it returns will send as the resolve parameter.
3. HOOKS.BEFORE_REJECT calls when the service client promise is rejecting and the value that it returns will send as the reject parameter.
4. HOOKS.AFTER_SUCCESS calls exactly before the resolve and this is not async too.
5. HOOKS.AFTER_FAIL calls exactly before the reject and this is not async too.
6. HOOKS.UPDATE_REQUEST_CONFIG with this hook, you can update the request config before the fire.

Also, you can set the special client and hooks for each ClientHandler:

If you active the queue on initialization, so you can specify the behavior of each service in the queue, and determine that your service should be parallel beside other services or pending. To do that you should pass options to
the fire method and set the value of the parallel property as true or false. Here is an example of a parallel and pending service definition.

Tips

• To use the fetch as your client function, you need to send the bound version of it as like fetch.bind(window).
• The fireOptions that you pass to the fire method is accessible in the hook methods as the second parameter.
• The wrapper itself is promise base but the client function doesn't need to be a promise.

Conclusion

This wrapper could be very helpful when you want to have control over lots of services at the same time in a common way. I used this code structure in my two previous projects and tried to make it as dynamic as I can. You can use it with many famed HTTP request handlers or you can define your client. You can enable or disable the queue as you want.

The library is new, it may not cover all things, or may have some problems. Comment your ideas and contribute to the project. It would be very pleasing to me.

Coding Interview Questions | Skilled.dev