Sending an HTTP request

JavaScript:
Sending an HTTP request

How to:

JavaScript uses the fetch API for sending requests. Here’s how to do a simple GET request:

fetch('https://jsonplaceholder.typicode.com/posts/1')
  .then(response => response.json())
  .then(json => console.log(json))
  .catch(err => console.error('Error:', err));

The output will be JSON data from the URL. Easy, right?

And for a POST request:

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(json => console.log(json))
  .catch(err => console.error('Error:', err));

This sends new data and outputs the server’s response.

Deep Dive

HTTP requests have been around since the beginning of the web—think HTML forms. XMLHttpRequest (XHR) was once the go-to method for sending requests in JavaScript, but it’s clunky.

Enter fetch, a modern approach that’s promise-based, making it cleaner and more robust. Unlike XHR, fetch handles both requests and responses in a single, unified API and is built into the language, no libraries required.

Alternatives? Sure. Libraries like Axios or jQuery’s Ajax are still in use. They offer some syntactic sugar and workarounds for specific quirks, but fetch is native and generally the way forward.

Implementation details? Remember to handle errors, work with different response types, and be aware of cross-origin resource sharing (CORS) rules.

JavaScript:Sending an HTTP request

How to:

Deep Dive

See Also

JavaScript:
Sending an HTTP request