The Fetch API

The Fetch API provides a modern, promise-based way to make asynchronous HTTP requests in JavaScript. It replaces older methods like XMLHttpRequest with a cleaner and more powerful syntax.

Basic Usage

Use fetch() to request a resource. It returns a Promise that resolves to a Response object.

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

Key Concepts

• fetch(url, options): Sends a request to the specified URL with optional settings.
• Response object: Represents the response to the request.
• Response methods: json(), text(), blob(), etc., to parse response body.
• Promises: Fetch returns a promise that resolves once headers are received.

Common Response Parsing Methods

Handling HTTP Errors

The Fetch API only rejects a promise on network errors. To handle HTTP errors (like 404 or 500), check the response.ok property.

fetch('https://api.example.com/data')
  .then(response => {
    if (!response.ok) {
      throw new Error('HTTP error ' + response.status);
    }
    return response.json();
  })
  .then(data => console.log(data))
  .catch(error => console.error('Fetch error:', error));

Sending Data with Fetch

You can send data along with the request by passing an options object as the second argument to fetch(). Commonly used methods include POST, PUT, PATCH.

fetch('https://api.example.com/submit', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ name: 'Alice', age: 30 })
})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

Summary

• Fetch is promise-based, allowing clean asynchronous code.
• Use response.ok to detect HTTP errors.
• Parse responses using methods like json() or text().
• Send data by configuring method, headers, and body in the options object.