Introduction
Axios is a popular JavaScript library used to make HTTP requests from the browser and Node.js. It provides a simple and clean API for making asynchronous requests to REST APIs, handling responses, and managing errors. In this tutorial, we’ll explore how to get started with Axios, covering the basics of installation, making requests, handling responses, and more.
Prerequisites
To follow this tutorial, you should have a basic understanding of JavaScript, including concepts like functions, promises, and asynchronous programming. Familiarity with HTTP methods (GET, POST, etc.) will also be helpful.
1. Installing Axios
Axios can be installed via npm if you're using Node.js or directly included in your HTML file if you're working in the browser.
1.1 Installing via npm
If you're working on a Node.js project, you can install Axios using npm:
npm install axios
1.2 Including in an HTML File
If you're working in the browser, you can include Axios directly via a CDN:
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
2. Making Your First Request
Let's start by making a simple GET request to a public API using Axios.
Example:
axios.get('https://jsonplaceholder.typicode.com/posts/1')
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error('Error fetching data:', error);
});
In this example:
- We use
axios.get() to send a GET request to the specified URL. - The
then() method handles the successful response, where response.data contains the returned data. - The
catch() method handles any errors that occur during the request.
3. Making POST Requests
Axios makes it easy to send POST requests with data. Here's how you can send a POST request to create a new resource.
Example:
axios.post('https://jsonplaceholder.typicode.com/posts', {
title: 'New Post',
body: 'This is the content of the new post.',
userId: 1
})
.then(response => {
console.log('Post created:', response.data);
})
.catch(error => {
console.error('Error creating post:', error);
});
In this example:
- We use
axios.post() to send a POST request to the API endpoint. - The second argument to
axios.post() is the data object that will be sent with the request.
4. Handling Responses
Axios provides a variety of ways to handle responses, allowing you to work with the data returned by the server.
4.1 Accessing Response Data
The response object contains several useful properties:
data: The actual data returned by the server.status: The HTTP status code.statusText: The HTTP status text.headers: The headers sent by the server.
Example:
axios.get('https://jsonplaceholder.typicode.com/posts/1')
.then(response => {
console.log('Data:', response.data);
console.log('Status:', response.status);
console.log('Headers:', response.headers);
});
5. Working with Query Parameters
You can easily send query parameters with your GET requests using Axios.
Example:
axios.get('https://jsonplaceholder.typicode.com/posts', {
params: {
userId: 1
}
})
.then(response => {
console.log('Posts by user 1:', response.data);
})
.catch(error => {
console.error('Error fetching posts:', error);
});
In this example:
- We pass an object with query parameters to the
params option in axios.get().
6. Setting Request Headers
Custom headers can be set in Axios requests, which is useful when working with APIs that require authentication tokens or specific content types.
Example:
axios.get('https://jsonplaceholder.typicode.com/posts/1', {
headers: {
'Authorization': 'Bearer YOUR_TOKEN_HERE'
}
})
.then(response => {
console.log('Post data:', response.data);
})
.catch(error => {
console.error('Error fetching data:', error);
});
7. Making Concurrent Requests
Axios allows you to make multiple requests simultaneously using axios.all() and axios.spread().
Example:
axios.all([
axios.get('https://jsonplaceholder.typicode.com/posts/1'),
axios.get('https://jsonplaceholder.typicode.com/posts/2')
])
.then(axios.spread((post1, post2) => {
console.log('Post 1:', post1.data);
console.log('Post 2:', post2.data);
}))
.catch(error => {
console.error('Error fetching data:', error);
});
In this example:
- We use
axios.all() to send multiple requests. - The
axios.spread() function is used to handle the responses separately.
8. Handling Errors
Error handling is crucial when working with HTTP requests. Axios provides several ways to manage errors, including checking the response status and handling network errors.
Example:
axios.get('https://jsonplaceholder.typicode.com/invalid-url')
.then(response => {
console.log('Data:', response.data);
})
.catch(error => {
if (error.response) {
console.error('Error Response:', error.response.data);
} else if (error.request) {
console.error('No Response:', error.request);
} else {
console.error('Error:', error.message);
}
});
9. Creating an Axios Instance
If you're making multiple requests to the same base URL or with the same configuration, you can create an Axios instance.
Example:
const apiClient = axios.create({
baseURL: 'https://jsonplaceholder.typicode.com',
timeout: 1000,
headers: { 'X-Custom-Header': 'foobar' }
});
apiClient.get('/posts/1')
.then(response => {
console.log('Post:', response.data);
});
In this example:
- We create an Axios instance with a base URL and custom configuration.
- The instance can be reused for multiple requests, simplifying your code.
Conclusion
Axios is a powerful and flexible library for making HTTP requests in JavaScript. Whether you're fetching data, submitting forms, or handling complex API interactions, Axios simplifies the process with its clean and consistent API. By mastering the basics covered in this tutorial, you'll be well-equipped to use Axios in your own projects.
Next Steps
- Experiment with making requests to different APIs.
- Explore more advanced Axios features like interceptors and request cancellation.
- Consider using Axios in a framework like React or Vue.js for even more powerful applications.
Additional Resources
This tutorial provides a comprehensive introduction to using Axios for making HTTP requests in JavaScript. By understanding these basics, you'll be able to integrate Axios into your applications, streamlining your API interactions and improving your development workflow.