snippetjavascriptTip

How can I perform an HTTP request in JavaScript?

Submitted by: @import:30-seconds-of-code·Mar 2, 2026·

Viewed 0 times

javascripthowcanhttpperformrequest

Problem

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.
<baseline-support featureId="fetch">
</baseline-support>
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.

Solution

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

<baseline-support featureId="fetch">
</baseline-support>
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.
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.
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'.

Code Snippets

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

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

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

Context

From 30-seconds-of-code: http-get-post-put-delete

Revisions (0)

No revisions yet.