This content originally appeared on DEV Community and was authored by Sudhanshu Gaikwad
When building web applications, making HTTP requests is a common task. There are several ways to do this in JavaScript, each with its own advantages and use cases. In this post, we’ll explore four popular methods: fetch(), axios(), $.ajax(), and XMLHttpRequest(), with simple examples for each.
1. Using fetch()
The fetch() function allows you to request HTTP to fetch resources from a network. It uses promises, which makes it easier to handle asynchronous operations.
Example
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));
2. Using Axios()
axios() is a popular HTTP client for making requests from browsers or Node.jsapplications. It is similar to the built-in fetch() API but includes additional features such as request and response interceptors, automatic JSONparsing, and more.
Example
axios.get('https://api.example.com/data')
.then(response => console.log(response.data))
.catch(error => console.error('Error:', error));
3. Using $.ajax()
If you’re working with jQuery, you can use the $.ajax() function to make HTTP requests. It provides a simple interface for making AJAX requests and handling responses.
Example
$.ajax({
url: 'https://api.example.com/data',
method: 'GET',
success: function(data) {
console.log(data);
},
error: function(error) {
console.error('Error:', error);
}
});
4. Using XMLHttpRequest()
The XMLHttpRequest object provides an easy way to fetch data from a URL without a page refresh. It's a bit lower-level than fetch() or libraries like Axios, but it's still widely used in many applications.
Example
var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true);
xhr.onload = function() {
if (xhr.status >= 200 && xhr.status < 300) {
console.log(JSON.parse(xhr.responseText));
} else {
console.error('Error:', xhr.statusText);
}
};
xhr.onerror = function() {
console.error('Request failed');
};
xhr.send();
In this example, we create a new XMLHttpRequest, open a GET request, and handle the response by checking the status code and parsing the response text.
This content originally appeared on DEV Community and was authored by Sudhanshu Gaikwad
Sudhanshu Gaikwad | Sciencx (2024-07-10T03:34:49+00:00) Getting Data Through Using API in JavaScript.. Retrieved from https://www.scien.cx/2024/07/10/getting-data-through-using-api-in-javascript/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.