DEV Community

Cover image for Creating an Axios Instance
Rohith ND
Rohith ND

Posted on

34 2

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.

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


Enter fullscreen mode Exit fullscreen mode

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;


Enter fullscreen mode Exit fullscreen mode

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;


Enter fullscreen mode Exit fullscreen mode

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

Image of Datadog

The Essential Toolkit for Front-end Developers

Take a user-centric approach to front-end monitoring that evolves alongside increasingly complex frameworks and single-page applications.

Get The Kit

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more