Handling API calls in Vue

As a full time Vue developer at home I’ve been exploring different ways of making API calls and integrating them into store.

My approach I settled with for some time already works fine for my own private project.

So my approach is to wrap Axios calls and provide similar methods and delegate additional business logic related to preparing and sending requests to API.

Initially the code below used browser fetch but it was somewhat problematic to cancel requests and track progress so Axios fulfilled those requirements.

As you can see everything is pretty straight forward, except file upload for which I decided to stick to browser fetch. Also by hiding all intermediate request configuration we can focus on what we expect from API call and what data is communicated to API.

Next part is helper functions like error handling, preparing headers, setting JWT token and providing simple functions to escape and compose query parameters.

Also you might want to ask about default global request configuration and for it there is simple configuration.

axios.defaults.baseURL = 'https://api.awesome-project.com'

Server errors handled by defining an interceptors and passing an error handler.

We can always add advanced integrations with Axios but native fetch looks promising because big players are already investing efforts to make it widely available (it is available already but you have to cope with limitations).

And how all these things are related to Vuex actions?

Once Vuex gets integrated at some point you will have necessity to make API calls and putting all API calls inside Vuex actions is not bad except the moment when it starts growing it becomes quite hard to follow on what is going on.

Lets say we have Vuex actions responsible for handing user’s session so we need to obtain

• JWT token,
• May be get CSRF token,
• May be we need login method.

Taking these into account lets look at the the following sample creates “mental” overhead and if there are more than a dozen of actions then the chances are you get lost or get slowed down are pretty high

Now lets compare those to refined actions with clear domain boundaries

It is pretty easy to follow and see what it going on and “mental” overhead compared to previous example is ok for me.

Ok these are just helpers whats next where are the real actions?

So my approach to to have additional domain layer which knows how to talk with our API thus Vuex actions only knows how to call them and pass required parameters.

As you can see store actions just know what to call and how to call the rest of the logic like processing errors and keeping additional business logic is unnecessary.

Sidenote: My style of defining actions looks pretty similar to Redux, thats because past experience as a React developer.

I will appreciate any feedback, review and relevant critiques.

Update: 16 May 2018

I made an example project which you can find at https://github.com/imanhodjaev/vue-rest-api-sample

Where to look:

1. Then /store
2. Look at /api
3. Then /http

Update: 4 August 2018

Recently made a talk about the things I wrote in this article and you can find presentation here http://speakerdeck.com/imanhodjaev/vue-and-rest-api-patterns

If you are interested in Vue related topics you might want to subscribe to my Telegram channel https://t.me/FullTimeVue

What is your experience?

Thanks.