axios-rest-resource
Schema-based HTTP client powered by axios. Built with Typescript. Heavily inspired by AngularJS' $resource
.
Installation
npm i axios-rest-resource axios
Quick start
-
Create resource module in your utils folder
// utils/resource.ts -
Using a newly created resource builder create an actual resource
// api/entity1.js// exports an object// {// create: (requestConfig) => axiosPromise // sends POST http://localhost:3000/entity1,// read: (requestConfig) => axiosPromise // sends GET http://localhost:3000/entity1,// readOne: (requestConfig) => axiosPromise // sends GET http://localhost:3000/entity1/{id},// remove: (requestConfig) => axiosPromise // sends DELETE http://localhost:3000/entity1/{id},// update: (requestConfig) => axiosPromise // sends PUT http://localhost:3000/entity1/{id}// } -
Use your resource whenever you want to make an AJAX call
// sends GET http://localhost:3000/entity1// resRead is a Promise of data received from the server// for id = '123'// sends GET http://localhost:3000/entity1/123// resReadOne is a Promise of data received from the server// for data = { field1: 'test' }// sends POST http://localhost:3000/entity1 with body { field1: 'test' }// resCreate is a Promise of data received from the server// for data = { field1: 'test' } and id = '123'// sends PUT http://localhost:3000/entity1/123 with body { field1: 'test' }// resUpdate is a Promise of data received from the server// for id = '123'// sends DELETE http://localhost:3000/entity1/123// resRemove is a Promise of data received from the server
URL token substituion
axios-rest-resource applies interceptorUrlFormatter interceptor by default. It handles {token} substitution in URLs.
Custom resource schema
-
Create resource module in your utils folder
// utils/resource.ts -
Using a newly created resource builder create an actual resource
// api/entity2.js// exports an object// {// create: (requestConfig) => axiosPromise // sends POST http://localhost:3000/entity2,// read: (requestConfig) => axiosPromise // sends GET http://localhost:3000/entity2,// readOne: (requestConfig) => axiosPromise // sends GET http://localhost:3000/entity2/{id},// remove: (requestConfig) => axiosPromise // sends DELETE http://localhost:3000/entity2/{id},// update: (requestConfig) => axiosPromise // sends PUT http://localhost:3000/entity2/{id},// doSomething: (requestConfig) => axiosPromise // sends POST http://localhost:3000/entity2/do-something// } -
Use your resource whenever you want to make an AJAX call
// sends GET http://localhost:3000/entity2// resRead is a Promise of data received from the server// for id = '123'// sends GET http://localhost:3000/entity2/123// resReadOne is a Promise of data received from the server// for data = { field1: 'test' }// sends POST http://localhost:3000/entity2 with body { field1: 'test' }// resCreate is a Promise of data received from the server// for data = { field1: 'test' } and id = '123'// sends PUT http://localhost:3000/entity2/123 with body { field1: 'test' }// resUpdate is a Promise of data received from the server// for id = '123'// sends DELETE http://localhost:3000/entity2/123// resRemove is a Promise of data received from the server// sends POST http://localhost:3000/entity2/do-something// resDoSomething is a Promise of data received from the server
You custom schema does not need to extend default schema if you do not want that
// api/entity.js // exports an object// {// doSomething: (requestConfig) => axiosPromise // sends POST http://localhost:3000/entity/do-something// }
Alternatively you can use a partial of a default schema
// api/entity.js // exports an object// {// read: (requestConfig) => axiosPromise // sends GET http://localhost:3000/entity,// readOne: (requestConfig) => axiosPromise // sends GET http://localhost:3000/entity/{id},// }
In depth
What does ResourceBuilder
do exactly upon creation?
When you call new ResourceBuilder(axiosConfig)
- If your
axiosConfig
doesn't haveheaders.Accept
property it sets it to 'application/json'. - It creates a new instance of axios passing
axiosConfig
toaxios.create
. - It adds
interceptorUrlFormatter
to request interceptors of the newly created instance of axios. - It exposes the newly created instance of axios for further modifications at
axiosInstance
.
Each instance of ResourceBuilder has its own axiosInstance
. It's useful if you want to do something more with your axios instance like adding an interceptor.
resourceBuilder.axiosInstance.interceptors.response.usemyCustomResponeInterceptor