How to configure default options for Axios requests?

By setting default headers, you can include certain headers, such as authorization tokens, in every request. Additionally, setting a default timeout can prevent stalled requests that may affect the performance of your application.

Set default headers for Axios Requests

Headers can provide additional information about the request when making HTTP requests with Axios. They can be used to include information such as authentication tokens, content type, and encoding.

Before setting default headers in Axios requests, it is important to identify the required headers for your application. Consider the headers necessary for authentication, caching, and other functionality your application needs.

Here is a step-by-step guide on how to set default headers in Axios request:

Step #1

Create an Axios instance using the create method:

js
Copy
import axios from 'axios';
const instance = axios.create({
  // set default headers here
});

Step #2

Set the default headers using the headers property:

js
Copy
const instance = axios.create({
  headers: {
    'Authorization': 'Bearer <token>',
    'Content-Type': 'application/json'
  }
});

Step #3

Make requests using the Axios instance:

js
Copy
instance.get('/api/data')
  .then(response => console.log(response.data))
  .catch(error => console.error(error));

Here are a few examples of common headers that can be set as default headers:

• Authorization: Used to include authentication tokens in requests.
• Content-Type: Used to specify the format of the request data.
• Accept: Used to specify the format of the response data.
• User-Agent: Used to identify the client making the request.
• Cache-Control: Used to specify caching directives for the response.

Set default timeouts

When making HTTP requests with Axios, we can use timeouts to prevent stalled requests and improve the performance of our application. By setting default timeouts in Axios requests, you can ensure that requests do not take longer than a specified time to complete.

Timeouts are used to specify the amount of time that a request should take to complete. If a request takes longer than the specified timeout, the request is considered timed out, and an error is returned.

Here is a step-by-step guide on how to set default timeouts in Axios requests:

Step 1

Create an Axios instance using the create method:

js
Copy
import axios from 'axios';
const instance = axios.create({
  // set default timeouts here
});

Step 2

Set the default timeout using the timeout property:

js
Copy
const instance = axios.create({
  timeout: 5000 // 5 seconds
});

Step 3

Make requests using the Axios instance:

js
Copy
instance.get('/api/data')
  .then(response => console.log(response.data))
  .catch(error => console.error(error));

Wrap up

Configuring defaults for Axios requests by setting default headers and timeouts can improve your application's performance, reliability, and security. With default headers, you can ensure that required headers are included in every request, saving time and reducing errors.

If you want to find some APIs to test Axios default options, we have written a guide on world’s largest API hub that offers thousands of APIs.