@dev-plus-plus/axios-transformer
v1.0.1
Published
An axios extension that aim to transform the response into a class instance.
Downloads
578
Readme
@dev-plus-plus/axios-transformer
An axios extension that aim to transform the response into a class instance.
It uses Axios to handle HTTP calls and Class-Transformer to transform plain objects from/to class-objects
Install
npm i @dev-plus-plus/axios-transformer axios class-transformer
Request Usage
Axios-transformer supports GET, POST, PUT, PATCH, DELETE and HEAD Http Methods. Just like Axios.
Import
import axiosT from '@dev-plus-plus/axios-transformer'
// or
import {axiosT} from '@dev-plus-plus/axios-transformer'
// or even (if you want to handle as class)
import {AxiosTransformer} from '@dev-plus-plus/axios-transformer'
Create any class to use as result
class BlogPost {
id: number | null = null
title: string | null = null
body: string | null = null
userId: number | null = null
}
Make a GET request with a new Object response
const respBlogPost = await axiosT.get('https://jsonplaceholder.typicode.com/posts/1')
.as(BlogPost) // we are choosing to transform to a new object of BlogPost class
.fetchData() // submit the request
/*
respBlogPost is a BlogPost object and will be something like this:
{
body: `quia et suscipit
suscipit recusandae consequuntur expedita et cum
reprehenderit molestiae ut ut quas totam
nostrum rerum est autem sunt rem eveniet architecto`,
id: 1,
title: "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
userId: 1
}
*/
Make a GET request with an Array response
const blogPosts = await axiosT.get('https://jsonplaceholder.typicode.com/posts')
.asArrayOf(BlogPost) // we are choosing to transform to an array of BlogPost
.fetchData() // submit the request
/*
blogPosts is a BlogPost[] and will be something like this:
[
{
body: `quia et suscipit
suscipit recusandae consequuntur expedita et cum
reprehenderit molestiae ut ut quas totam
nostrum rerum est autem sunt rem eveniet architecto`,
id: 1,
title: "sunt aut facere repellat provident occaecati excepturi optio reprehenderit",
userId: 1
},
...
]
*/
Make a POST request filling an existing object on response
// instantiate an object
const myBlogPost = new BlogPost()
myBlogPost.body = 'no great news today, the rich are getting richer'
// pass the object as the POST request Body
await axiosT.post('https://jsonplaceholder.typicode.com/posts/', myBlogPost)
.as(myBlogPost) // and filling its properties on response, PS.: it could be a different object
.fetchData() // submit the request
/* myBlogPost is a BlogPost with the properties filled:
{
id: 101, // this id was filled by the server response
body: 'no great news today, the rich are getting richer',
title: null,
userId: null
}
*/
Response types
You can use this methods to parse the response:
as(MyClass)
- Transforms to a new object of the choosen classas(myInstantiatedObject)
- Fills the properties of the choosen objectasArrayOf(MyClass)
- Transforms to an array of the choosen classasString()
- Returns as stringasNumber()
- Returns as numberasBoolean()
- Returns as booleanasAny()
- Returns as it isasVoid()
- Returns nothing
Retrive the Response information
const resp = await axiosT.delete('https://jsonplaceholder.typicode.com/posts/1')
.asVoid() // set resp as void
.fetchResponse() // submit the result
// if successful, resp.status will be 200
// and resp.data will be the response body (use getData() as shortcut)
Add a delay before the request
const resp = await Request.head('https://jsonplaceholder.typicode.com/posts/1')
.withDelay(2000) // wait 2 seconds before making the request
.asString() // set resp as string
.fetchResponse() // submit the result
Globally listen to requests
Useful for loading interactions
// on this example we are setting counters for when the request start and end
let startCbCount = 0
let endCbCount = 0
const startCb = () => startCbCount++
const endCb = () => endCbCount++
// then we register the listeners passing a name
axiosT.event.on('requestStart', startCb)
axiosT.event.on('requestEnd', endCb)
// make the request
const myBlogPost = await axiosT.get('https://jsonplaceholder.typicode.com/posts/1')
.withName('foo') // set the request name here
.as(BlogPost)
.fetchData()
// then the listeners will be called
// startCbCount and endCbCount are both 1 now
axiosT.event.off('requestStart', startCb) // you can remove the specific listener
axiosT.event.clean() // or remove all listeners
Ignore fields and map names and types with Annotations
Using Class-Transformer we can control the serialization behaviour
@AxiosTransform(clsType)
or @Type(() => clsType)
@AxiosRequestExpose(name?)
or @Expose({ name, toPlainOnly: true })
@AxiosResponseExpose(name?)
or @Expose({ name, toClassOnly: true })
@AxiosExpose(name?)
or @Expose({ name })
Exposing properties with different names