An Interest In:
Web News this Week
- February 29, 2024
- February 28, 2024
- February 27, 2024
- February 26, 2024
- February 25, 2024
- February 24, 2024
- February 23, 2024
Managing API layers in Vue.js with TypeScript
Motivation
Almost every Single-Page Application at some point needs to get some data from the backend. Sometimes there are several sources of data like REST APIs, Web Sockets etc. It's important to manage API layer in the right way to make it simple and easy to use in any place of your application no matter if it's store, component or other source file.
TLDR
If you already have some experience in development and want to check the solution here is the FancyUserCard
example. If some things would be hard to understand feel free to check the detailed step-by-step path.
Bad
Performing API calls in the component is bad because:
- You make your components large and filled with logic that has nothing to do with the component itself which violates SRP;
- Same API methods could be used in different components which causes code duplication and violates DRY.
- You are importing dependencies globally and it violates DI principle.
- Every time when API changes, you need to manually change every method that is needed to be modified;
Good
To make things work better we need to slightly change our code and move all the API calls into separate place.
users.api.ts
- Have one single
AxiosInstance
that is configured to work with/users
API branch and our code becomes modular; - Have all methods located in one place so it's easier to make changes and to reuse them in different components without duplicating code;
- Handle successful request as well as request failure and make us able to work with both error and data object depending on request status;
- Provide standardized response for each method so we can work with them in one way.
FancyUserCard.vue
- We are not dealing with http layer at all so our component is only responsible for rendering data that comes from API layer;
- Methods return both errors and data so we can notify user if something went wrong or simply use data that was returned by method.
Advanced
- The API call method was moved to reduce code duplication and all the methods are called using this private method.
Some other ideas
The approach shown above is enough to handle standard API layer workflow. If you want to make it even more flexible you could think about implementing some ideas below:
Creating abstraction over HTTP layerAbout the idea:
In the example you can see that now we have an interface for our HttpClient
so we could have as many implementations as we need. It works if we have different Http clients like axios
, fetch
, ky
and if we will need to migrate from one to another we would simply need to rewrite our HttpClient
implementation in one place and it will be applied automatically in any place where we use our service;
Create a factoryAbout the idea:
If you have few different data sources you could use some sort of factory to create the instance with needed implementation without an explicit class declaration. In this case you just need to provide a contract interface and then to implement each API methods as you want.
Conclusions
Hope that this article was useful for you. Do not hesitate to leave a comment if you have some other ideas or if there are any questions about the content of this post. I will update this post with detailed information about the problem, the solutions and refactoring process soon.
Cheers!
Original Link: https://dev.to/blindkai/managing-api-layers-in-vue-js-with-typescript-hno
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To