64-fetch.md

What is Fetch ?

The Fetch API is a built-in JavaScript interface that allows you to make asynchronous HTTP requests to fetch resources from the web. The Fetch API is typically used to retrieve data from a web server or API endpoint, but it can also be used to send data to the server using the HTTP POST method.

Here's an example of how to use the Fetch API to retrieve data from a web API:

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

In this example, we use the fetch method to send an HTTP GET request to the URL https://api.example.com/data. The fetch method returns a Promise that resolves to a Response object, which contains information about the HTTP response.

We then use the json method on the Response object to parse the response body as JSON data, and return another Promise that resolves to the parsed JSON data.

Finally, we use the then method to log the parsed JSON data to the console, and the catch method to log any errors that occur during the fetch operation.

Here's another example that shows how to use the Fetch API to send data to a server using the HTTP POST method:

const data = {
  name: 'John Doe',
  email: 'johndoe@example.com',
  message: 'Hello world!'
};

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

In this example, we define an object data that contains some data we want to send to the server. We then use the fetch method to send an HTTP POST request to the URL https://api.example.com/contact, with the request body set to the JSON stringified version of the data object.

We also include a Content-Type header with the value application/json to indicate that we are sending JSON data in the request body.

As before, we use the then method to parse the JSON response data and log it to the console, and the catch method to handle any errors that occur during the fetch operation.