How do you make an HTTP request in Javascript?

Ochukoevidence
2 min readJun 28, 2023

In JavaScript, you can make an HTTP request using the XMLHttpRequest object or the newer fetch API. Both methods allow you to send HTTP requests and handle the responses asynchronously. Here's an example of how to use each method:

Using XMLHttpRequest:

javascriptCopy code
var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true); // Specify the HTTP method and URL
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) { // Check if the request is completed and successful
var response = xhr.responseText;
console.log(response); // Handle the response data here
}
};
xhr.send(); // Send the request

Using fetch:

javascriptCopy code
fetch('https://api.example.com/data')
.then(function(response) {
if (response.ok) { // Check if the response is successful
return response.text();
} else {
throw new Error('Error: ' + response.status);
}
})
.then(function(data) {
console.log(data); // Handle the response data here
})
.catch(function(error) {
console.log(error); // Handle any errors that occurred during the request
});

Both methods allow you to send various types of requests (e.g., GET, POST, PUT, DELETE) and include request headers and request payloads if needed. The fetch API provides a more modern and flexible way of making HTTP requests, but XMLHttpRequest is still widely supported in older browsers.

What is an HTTP request in Javascript?

Certainly! Here’s an example of making an HTTP request in JavaScript using the fetch API:

javascriptCopy code
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => {
// Handle the response data here
console.log(data);
})
.catch(error => {
// Handle any errors that occurred during the request
console.error('Error:', error);
});

In this example, we are making a GET request to 'https://api.example.com/data'. The fetch function returns a Promise that resolves to the response object. We can then use the json() method of the response object to extract the JSON data from the response.

The response data is accessed in the second then block, where you can perform any necessary handling or processing. In this example, we are logging the data to the console.

If an error occurs during the request, it will be caught in the catch block, where you can handle and log the error.

This fetch API provides a more modern and flexible way of making HTTP requests in JavaScript. It is also supported in most modern browsers.

ALSO CHECK THESE OUT:

Twitter Now Has a New API for Start-Ups

--

--