ReactJS – Setting default baseurl in Axios

Total
0
Shares

By setting the default baseurl in Axios, we don’t need to call the APIs with whole url. Only the endpoint will be required. The simplest procedure of doing this is by creating a separate component file and setting all default parameters there.

Create a component, axios.js

import axios from 'axios';
const instance = axios.create({baseURL: 'https://www.example.com'});
export default instance

In this component, we have exported the axios package and created an instance with all default parameters. For this articles, we are concerned with baseURL only. Now we need to import this file throughout our application where we need to make an API call.

So, suppose you need to get JSON from endpoint /superhero/, you will do it like this –

Create a file, superhero.js

import axios from 'axios/axios.js'
// This axios instance is custom. Imported from our created axios.js file

function SuperHero() {
  const [superHeroJSON, setSuperHeroJSON] = React.useState({});
  React.useEffect(() => {
     axios.get('/superhero/').then(response => {
       setSuperHeroJSON(response);
     }).catch(error => {});

  }, [])

  return (<>
    {JSON.stringify(superHeroJSON, null, '    ')}
  </>)
}

export default SuperHero;

In this example we are using our custom axios component and not the one shipped by Axios package. This component is set with default baseURL of example.com and so we do not need to provide full url in axios.get.

You can also set default headers, request / response parameters while setting up Axios instance.

To set content-type header –

import axios from 'axios';
const instance = axios.create({baseURL: 'https://www.example.com'});
instance.defaults.headers.common['Content-Type'] = 'multipart/form-data';

export default instance

    Tweet this to help others

Live Demo

Sign Up for Our Newsletters

Get only the best articles delivered to your mail

You May Also Like

.map is not a function

map() can only be used with Arrays. So, if you are getting error .map is not a function, you are probably using it on either the objects or other variables…
View Post

How to use React?

This article will help you to know how to use React JS in web applications. React js creates static websites with optimized performance and speed. Step 1: Install create-react-app npm…
View Post