Mastering the Fetch API: Simplifying HTTP Requests in JavaScript

JavaScript Fetch API

The Fetch API is a modern, promise-based interface in JavaScript used for making HTTP requests. It simplifies the process of fetching resources from a server, replacing older methods like XMLHttpRequest. Fetch provides a cleaner and more readable approach for handling network requests and responses, supporting features like Promises, streaming, and async/await.

1. Key Features of Fetch API

• Promise-Based: Provides a more elegant way to handle asynchronous operations.
• Simplified Syntax: More readable compared to XMLHttpRequest.
• Supports Streaming: Handles large responses efficiently.
• Extensible: Easily integrates with modern JavaScript tools and libraries.

2. Basic Syntax of Fetch

fetch(url, options)
  .then(response => {
    // Handle the response
  })
  .catch(error => {
    // Handle errors
  });

3. Making a GET Request

Fetch defaults to the GET method.

Example:

fetch("https://jsonplaceholder.typicode.com/posts")
  .then(response => {
    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }
    return response.json();
  })
  .then(data => console.log("Data:", data))
  .catch(error => console.error("Error:", error));

4. Making a POST Request

To send data to a server, use the POST method with the body property in the options object.

Example:

fetch("https://jsonplaceholder.typicode.com/posts", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify({
    title: "foo",
    body: "bar",
    userId: 1,
  }),
})
  .then(response => response.json())
  .then(data => console.log("Response:", data))
  .catch(error => console.error("Error:", error));

5. Common Fetch Options

The fetch function accepts an options object to configure requests:

fetch(url, options)
  .then(response => {
    // Handle the response
  })
  .catch(error => {
    // Handle errors
  });

fetch("https://jsonplaceholder.typicode.com/posts")
  .then(response => {
    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }
    return response.json();
  })
  .then(data => console.log("Data:", data))
  .catch(error => console.error("Error:", error));

fetch("https://jsonplaceholder.typicode.com/posts", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
  },
  body: JSON.stringify({
    title: "foo",
    body: "bar",
    userId: 1,
  }),
})
  .then(response => response.json())
  .then(data => console.log("Response:", data))
  .catch(error => console.error("Error:", error));

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

The above is the detailed content of Mastering the Fetch API: Simplifying HTTP Requests in JavaScript. For more information, please follow other related articles on the PHP Chinese website!