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: {} */