Creating an Axios Instance

In this blog, I'll show you how to create an axios instance in a react project.

I had covered the fundamentals of Axios in my earlier blog.

GET, POST , PUT , DELETE in Axios

Rohith ND ・ Apr 9 '22

#axios #javascript #http #react

Once your react app is created lets create a components folder inside our src directory .Later, inside our components folder, create two folders named api and main to hold our api instance file and other webpage files.

src
|--components 
            |-api
            |-main

Inside api directory lets create a file named api_instance.js. Here i am using my localhost as baseURL.

import axios from "axios"; 

const instance = axios.create({
  baseURL : 'http://127.0.0.1:8000/api/',
  headers: {
//  Authorization: `<Your Auth Token>`,
    Content-Type: "application/json",
    timeout : 1000,
  }, 
  // .. other options
});

export default instance;

After we've finished creating our instance file, we can import it into our js file.
Let's create a file named home.js inside main folder

import React, { Component } from "react";
import instance from "../api/api_instance";

class Home extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  async componentDidMount() {
    try {
      await instance({
        // url of the api endpoint (can be changed)
        url: "home/",
        method: "GET",
      }).then((res) => {
        // handle success
        console.log(res);
      });
    } catch (e) {
      // handle error
      console.error(e);
    }
  }

  postData = async (e) => {
    e.preventDefault();
    var data = {
      id: 1,
      name: "rohith",
    };
    try {
      await instance({
        // url of the api endpoint (can be changed)
        url: "profile-create/",
        method: "POST",
        data: data,
      }).then((res) => {
        // handle success
        console.log(res);
      });
    } catch (e) {
      // handle error
      console.error(e);
    }
  };

  putData = async (e) => {
    e.preventDefault();
    var data = {
      id: 1,
      name: "ndrohith",
    };
    try {
      await instance({
        // url of the api endpoint (can be changed)
        url: "profile-update/",
        method: "PUT",
        data: data,
      }).then((res) => {
        // handle success
        console.log(res);
      });
    } catch (e) {
      // handle error
      console.error(e);
    }
  };

  deleteData = async (e) => {
    e.preventDefault();
    var data = {
      id: 1,
    };
    try {
      await instance({
        // url of the api endpoint (can be changed)
        url: "profile-delete/",
        method: "DELETE",
        data: data,
      }).then((res) => {
        // handle success
        console.log(res);
      });
    } catch (e) {
      // handle error
      console.error(e);
    }
  };

  render() {
    return <>Home Page</>;
  }
}

export default Home;

That's about all . Your axios instance has been created and can be configured according to your project.