Posted on Apr 12, 2022

Creating an Axios Instance

#axios #javascript #react

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;