axios-typescript-response

axios-typescript-response

Get axios AJAX response in typescript class objects

Install

• npm install axios-typescript-response

Supported RESTfull verbs

• GET
• DELETE
• POST
• PUT

Parameters

http.get(url: string, type: (new (arg: any) => T), useConstructor: Boolean, config?: AxiosRequestConfig | undefined)

• url: API url
• type: Expected data type to be returned from the API
• useConstructor: Indicates if the class constructor should be used (false by default)
• config: Axios configuration if needed

http.post(url: string, payload: any, type: (new (arg: any) => T), useConstructor: Boolean, config?: AxiosRequestConfig | undefined): Promise

• url: API url
• payload: Data that will be put in the request body
• type: Expected data type to be returned from the API
• useConstructor: Indicates if the class constructor should be used (false by default)
• config: Axios configuration if needed

Usage

Typescript Class with default constructor

class Post{
    id: number = 0;
    userId: number = 0;
    title: string = '';
    body: string = '';
}

import Http from 'axios-typescript-response';

...

http
  .get<Post>("https://jsonplaceholder.typicode.com/posts/1", Post)
  .then((response) => console.log(response instanceof Post))
  
  //result in console is true

axios
  .get<Post>("https://jsonplaceholder.typicode.com/posts/1")
  .then((response) => console.log(response.data instanceof Post))
  
  //result in console is false

Typescript Class with constructor

class Post{
    constructor(obj:any = {}){
        this.id = obj.id;
        this.userId = obj.userId;
        this.title = obj.title;
        this.body = obj.body;
    }

    id: number;
    userId: number;
    title: string;
    body: string;
}

import Http from 'axios-typescript-response';

...

http
  .get<Post>("https://jsonplaceholder.typicode.com/posts/1", Post, true)
  .then((response) => console.log(response instanceof Post))
  
  //result in console is true

axios
  .get<Post>("https://jsonplaceholder.typicode.com/posts/1")
  .then((response) => console.log(response.data instanceof Post))
  
  //result in console is false

Use axios interceptors

To add additional axios configuration, you must import the class instance and create the http object after the configuration is added.

import axios from 'axios';
import store from '../store/store';
import router from '../router/router';
import { Http } from 'axios-typescript-response';

axios.interceptors.request.use(config => {
    config.baseURL = store.getters.baseUrl;

    //Auth token
    const token = store.state.user!.token;
    
    if (token) {
        config.headers.Authorization = `Bearer ${token}`;
    }

    //Culture
    config.headers["Accept-Language"] =  store.getters.Language;
    config.headers["Accept"] = '*/*';

    return config;
});

// Add a 401 response interceptor
axios.interceptors.response.use(response => {
    return response;
}, function (error) {
    if (401 === error.response.status) {
        store.dispatch('logout').then(() => {
            router.push('/login');
        });
    } else {
        return Promise.reject(error);
    }
});

export default new Http();