How to Use Axios/Typescript like a pro! (axios-es6-class)

Well today I’ll show you the way I kind of use axios with typescript.

first thing is to have axios install along with typescript.

npm i axios && npm i -D typescript

Lets create the api.ts file

Now the way to use it is like let’s imagine we have a user api which extends from axios it’ll look like this.

import { Api } from "./api";
import { AxiosRequestConfig } from "axios";
export class UserApi extends Api {
    constructor (config: AxiosRequestConfig) {
        // NEVER FORGET THE SUPER
        super(config);
    }
}

and perhaps we have a login user method, let’s add that to the son of our Api class

/**
     * Generates an HTTP Request to get the credentials of the user.
     *
     * @param {object} credentials - user's identifications.
     * @param {string} credentials.email - user's email.
     * @param {string} credentials.password - user's password.
     * @returns {Promise<UserState>} userState - user information,
     */
    public loginUser (credentials: LoginCredentials): Promise<UserState> {
        return this.post<UserState>(API_LOGIN, JSON.stringify(credentials))
            .then((response: AxiosResponse<UserState>) => {
                const { data } = response;

                const state: UserState = {
                    firstName: data.firstName,
                    secondName: data.secondName,
                    lastName: data.lastName,
                    secondLastName: data.secondLastName,
                    email: data.email,
                    id: data.id,
                    token: data.token
                };

                return state;
            })
            .catch((error: AxiosError) => {
                throw error;
            });
    }
}

If users login they also have to register, then lets do that as well

/**
 * Adds a new user into our system.
 *
 * @param {object} RegisterCredentials - user basic info.
 * @param {string} RegisterCredentials.firstName.
 * @param {string} RegisterCredentials.secondName.
 * @param {string} RegisterCredentials.lastName.
 * @param {string} RegisterCredentials.secondLastName.
 * @param {string} RegisterCredentials.email.
 * @param {string} RegisterCredentials.password.
 * @param {string} RegisterCredentials.password2.
 * @returns {Promise<number>} status code of `CREATED`.
 */
public registerUser (credrentials: RegisterCredentials): Promise<number> {
    return this.post<number>(API_REGISTER, JSON.stringify(credrentials))
        .then((registered: AxiosResponse<number>) => {
            const { status } = registered;

            return status;
        })
        .catch((error: AxiosError) => {
            throw error;
        });
}

now lets see all together to see how it looks like

If you remove the types and comments, it looks like this

import { Api } from "../../utils/api";

class UserApi extends Api {
    public constructor (config) {
        super(config);

        this.loginUser = this.loginUser.bind(this);
        this.registerUser = this.registerUser.bind(this);
    }

    public loginUser (credentials) {
        return this.post(API_LOGIN, JSON.stringify(credentials))
            .then(response => {
                const { data } = response;

                const state= {
                    firstName: data.firstName,
                    secondName: data.secondName,
                    lastName: data.lastName,
                    secondLastName: data.secondLastName,
                    email: data.email,
                    id: data.id,
                    token: data.token
                };

                return state;
            })
            .catch((error) => {
                throw error;
            });
    }

    public registerUser (credrentials)  {
        return this.post(API_REGISTER, JSON.stringify(credrentials))
            .then((registered) => {
                const { status } = registered;

                return status;
            })
            .catch((error) => {
                throw error;
            });
    }
}

export const userApi = new UserApi();

but then what is the whole point of using typescript if you take out them types.

on this story you’ll find an implementation of the api.

If you prefer or if you are not using typescript, you are always welcome to import it as dependency.

npm isntall axios-es6-class