JavaScript Fetch Method

The fetch() method in JavaScript is used to make network requests and retrieve resources from a server. It returns a Promise that resolves to the response of the request, allowing you to handle the response data in various ways.

Here’s an example of using the fetch() method to make a GET request and retrieve data from an API:

fetch('https://api.example.com/data')
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not OK');
    }
    return response.json();
  })
  .then(data => {
    // Process the retrieved data
    console.log(data);
  })
  .catch(error => {
    // Handle any errors that occurred during the fetch request
    console.error('Error:', error);
  });

In this example:

We call fetch('https://api.example.com/data') to initiate a GET request to the specified URL.
The fetch() function returns a Promise that resolves to the response object.
We chain a .then() method to handle the response. In this case, we first check if the response was successful using response.ok. If it’s not OK, we throw an error.
If the response is OK, we call response.json() to parse the response body as JSON and return another Promise.
We chain another .then() method to handle the parsed JSON data. In this example, we simply log the data to the console, but you can perform any necessary processing or manipulation here.
If any error occurs during the fetch request or the promise chain, the .catch() method will be triggered. We can handle and log the error appropriately.

You can also use fetch() for other HTTP methods like POST, PUT, DELETE, etc., by providing additional options in the second argument. Here’s an example of making a POST request with JSON data:

fetch('https://api.example.com/data', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({ key: 'value' }),
})
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not OK');
    }
    return response.json();
  })
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error('Error:', error);
  });

In this case, we provide the additional options in the second argument of the fetch() function, including the HTTP method, headers, and the JSON payload in the body property.

The fetch() method is quite powerful and flexible, allowing you to interact with APIs and handle responses in various formats.

Share this:

Related