How can I perform an HTTP request in JavaScript?
The HTTP protocol is the foundation of data communication on the web. It is a request-response protocol, which means that a client sends a request to a server, and the server sends a response back to the client.
The most common HTTP methods are GET
, POST
, PUT
, and DELETE
. Sending a request via JavaScript is quite common and can be achieved either using the more modern fetch
API or the older XMLHttpRequest
web API.
Using the Fetch API
The Fetch API is a modern replacement for XMLHttpRequest
. It is a promise-based API that allows you to make network requests similar to XMLHttpRequest
, but with a simpler and more powerful interface.
HTTP GET request
The simplest use case is to make a GET
request to a given URL. As the fetch()
API returns a promise, you can use the then
method to handle the response. In the following example, the response is converted to JSON using the json()
method and then logged to the console.
fetch('https://jsonplaceholder.typicode.com/posts/1') .then(response => response.json()) .then(data => console.log(data)); /* Logs: { 'userId': 1, 'id': 1, 'title': 'sunt aut facere repellat provident occaecati…', 'body': '…' } */
HTTP POST request
To make a POST
request, you need to pass an object with the request options as the second argument to fetch()
. The method
option is set to 'POST'
, and the body
option is set to the data you want to send.
The type of data in the body
option can vary and should be encoded according to the Content-type
header. In the following example, the data is encoded as JSON using JSON.stringify
and the Content-type
header is set to 'application/json; charset=UTF-8'
.
fetch('https://jsonplaceholder.typicode.com/posts', { method: 'POST', body: JSON.stringify({ title: 'foo', body: 'bar', userId: 1 }), headers: { 'Content-type': 'application/json; charset=UTF-8' } }) .then(response => response.json()) .then(data => console.log(data)); /* Logs: { 'title': 'foo', 'body': 'bar', 'userId': 1, 'id': 101 } */
HTTP PUT request
Similarly to the POST
request, you can make a PUT
request by setting the method
option to 'PUT'
in the request options object. The rest of the request options are the same as for the POST
request.
fetch('https://jsonplaceholder.typicode.com/posts/1', { method: 'PUT', body: JSON.stringify({ id: 1, title: 'foo', body: 'bar', userId: 1 }), headers: { 'Content-type': 'application/json; charset=UTF-8' } }) .then(response => response.json()) .then(data => console.log(data)); /* Logs: { 'id': 1, 'title': 'foo', 'body': 'bar', 'userId': 1 } */
HTTP DELETE request
To make a DELETE
request, you need to set the method
option to 'DELETE'
in the request options object. A DELETE
request does not have a body, so the body
option is omitted in the following example.
fetch('https://jsonplaceholder.typicode.com/posts/1', { method: 'DELETE' }) .then(response => console.log(response)); /* Logs: {} */
Using XMLHttpRequest
The XMLHttpRequest
web API is the older way of making HTTP requests in JavaScript. It is not as powerful as the fetch
API, but it is still widely used and supported in all modern browsers.
Instead of using promises, XMLHttpRequest
uses event listeners to handle the response and errors. The onload
event is used to handle the response, and the onerror
event is used to handle errors.
HTTP GET request
The following example makes a GET
request to a given URL using the XMLHttpRequest
web API. The given callback
function is called with the responseText
when the request is successful, and the err
function is called when an error occurs.
const httpGet = (url, callback, err = console.error) => { const request = new XMLHttpRequest(); request.open('GET', url, true); request.onload = () => callback(request.responseText); request.onerror = () => err(request); request.send(); }; httpGet( 'https://jsonplaceholder.typicode.com/posts/1', console.log ); /* Logs: { 'userId': 1, 'id': 1, 'title': 'sunt aut facere repellat provident occaecati…', 'body': '…' } */
HTTP POST request
The following example makes a POST
request to a given URL using the XMLHttpRequest
web API. The data
argument is the data you want to send, and the callback
function is called with the responseText
when the request is successful. In order to set the Content-type
header, you need to use the setRequestHeader
method.
const httpPost = (url, data, callback, err = console.error) => { const request = new XMLHttpRequest(); request.open('POST', url, true); request.setRequestHeader('Content-type', 'application/json; charset=utf-8'); request.onload = () => callback(request.responseText); request.onerror = () => err(request); request.send(data); }; httpPost( 'https://jsonplaceholder.typicode.com/posts', JSON.stringify({ userId: 1, id: 1337, title: 'Foo', body: 'bar bar bar' }), console.log ); /* Logs: { 'title': 'foo', 'body': 'bar', 'userId': 1, 'id': 101 } */
HTTP PUT request
The following example makes a PUT
request to a given URL using the XMLHttpRequest
web API. The data
argument is the data you want to send, and the callback
function is called with the responseText
when the request is successful.
const httpPut = (url, data, callback, err = console.error) => { const request = new XMLHttpRequest(); request.open('PUT', url, true); request.setRequestHeader('Content-type', 'application/json; charset=utf-8'); request.onload = () => callback(request); request.onerror = () => err(request); request.send(data); }; httpPut( 'https://jsonplaceholder.typicode.com/posts/1', JSON.stringify({ id: 1, title: 'foo', body: 'bar', userId: 1 }), request => console.log(request.responseText) ); /* Logs: { 'id': 1, 'title': 'foo', 'body': 'bar', 'userId': 1 } */
HTTP DELETE request
The following example makes a DELETE
request to a given URL using the XMLHttpRequest
web API. The callback
function is called with the responseText
when the request is successful.
const httpDelete = (url, callback, err = console.error) => { const request = new XMLHttpRequest(); request.open('DELETE', url, true); request.onload = () => callback(request); request.onerror = () => err(request); request.send(); }; httpDelete('https://jsonplaceholder.typicode.com/posts/1', request => { console.log(request.responseText); }); /* Logs: {} */