© Apache-2.0 License
axios es6 class is a typescript module that implements axios to use it as a "modern" JavaScript TypeScript class.
first we need to install it:
$ npm i axios-es6-class
The class Api
expects an axios request config object. We made a small config example. It looks something like this:
import {AxiosRequestConfig} from "axios";
// this are the minimun properties the Api class expect
export const apiConfig: AxiosRequestConfig = {
timeout: 20000,
baseURL: "https://www.domain.com"
};
export class UserApi extends Api {
constructor (config) {
super(config);
this.login = this.login.bind(this);
}
login (credentials) {
return this.post("/users", credentials)
.then(this.success)
}
}
const userApi = new UserApi(apiConfig);
If you need to pass a token on each request. axios comes with something call interceptors. which are what the name says they are:
- Request
- Response
Thouse two things should be placed at the constructor of your api
export class UserApi extends Api {
constructor (config) {
super(config);
// this middleware is been called right before the http request is made.
this.interceptors.request.use(param => {
return {
...param,
headers: {
...param.headers,
"Authorization": `Bearer ${this.getToken()}`
},
}
});
// this middleware is been called right before the response is get it by the method that triggers the request
this.interceptors.response.use((param: AxiosResponse) => ({
...param
}));
this.login = this.login.bind(this);
}
login (credentials) {
return this.post("/users", credentials)
.then(response => {
const {data} = response;
this.setToken(data);
return data;
});
}
}
If by instance on each request your token is updated then you can use also the response interceptor.
The request interceptor gets an AxiosRequestConfig while the response interceptor gets a AxiosReponse where T
is the type of Object/Value youll get. BUT if there was an error on any of them. Interceptors have not one, but two callbacks
....
// this middleware is been called right before the http request is made.
this.interceptors.request.use((param) => {
return {
...param,
headers: {
...param.headers,
"Authorization": `Bearer ${this.getToken()}`
},
}
}, (error) => {
// handling error
});
// this middleware is been called right before the response is get it by the method that triggers the request
this.interceptors.response.use((param) => ({
...param
}, (error) => {
// handling error
}));
....
There are still some utilities that axios have that I have not add, but you can do almost everything on a es6 fashion way.