Fetch API

One of the most important features of JavaScript is its ability to make requests to external APIs and retrieve data. The fetch function is a built-in method in JavaScript that allows you to make HTTP requests to retrieve data from a server.

The fetch function returns a Promise that resolves with the response object when the request is complete. The response object contains the status code, headers, and body of the response. You can then parse the response body using methods like .json(), .text(), or .blob().

Here’s an example of how to use fetch to load data from an API:

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

In this example, we are making a GET request to the URL https://example.com/api/data. The response.json() method parses the response body as JSON and returns a new promise that resolves with the parsed data. The second .then() block logs the parsed data to the console.

If there is an error during the request, the .catch() block will be executed, logging the error to the console.

You can also add additional options to the fetch function, such as headers or a request body, to customize the request. Here’s an example:

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

In this example, we are making a POST request to the same URL, with a JSON request body containing a data property. We’ve also added a Content-Type header to specify that the request body is JSON.

Manage errors

In this example we are making a POST request to the same URL, and show how to use fetch to load data from an API and handle failed requests by checking the status of the response:

fetch('https://example.com/api/data')
  .then(response => {
    if (!response.ok) {
      throw new Error(`Request failed with status ${response.status}`);
    }
    return response.json();
  })
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error(error);
  });

Using await

Here’s the same example of loading data from an API using fetch with await instead of .then():

try {
  const response = await fetch('https://example.com/api/data');
  if (!response.ok) {
    throw new Error(`Request failed with status ${response.status}`);
  }
  const data = await response.json();
  console.log(data);
} catch (error) {
  console.error(error);
}

In conclusion, fetch is a powerful function in JavaScript that allows you to load data from external APIs. With its simple and flexible API, fetch is an essential tool for any modern web developer.