JavaScript fetch() API Tutorial

The fetch() API is a modern web feature that allows you to make requests to servers without having to use XMLHttpRequest (XHR). It is a promise-based API that provides an easy and convenient way to make HTTP requests to fetch resources from a server.

Overview

The fetch() API provides a simple, consistent interface for making requests to servers. It is built on top of the XMLHttpRequest API, and provides a more convenient way to make requests and handle responses.

Requesting Resources

To request a resource, you use the fetch() method, which takes a URL as its first argument. This is the URL of the resource you want to request. The fetch() method returns a Promise, which resolves to a Response object. This Response object can be used to access the response body, status, and headers.

Example

The following example shows how to use the fetch() method to request a resource from a server:

[dm_code_snippet background=”yes” background-mobile=”yes” slim=”no” line-numbers=”no” bg-color=”#abb8c3″ theme=”dark” language=”php” wrapped=”no” height=”” copy-text=”Copy Code” copy-confirmed=”Copied”]

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

[/dm_code_snippet]

In this example, we are requesting a resource from the example.com server. The response is then parsed as JSON and logged to the console. If an error occurs, it is logged as well.

Response Object

The fetch() method returns a Promise that resolves to a Response object. This Response object contains information about the response, including the status code, headers, and the body of the response.

Example

The following example shows how to access the response body, status, and headers of a response object:

[dm_code_snippet background=”yes” background-mobile=”yes” slim=”no” line-numbers=”no” bg-color=”#abb8c3″ theme=”dark” language=”php” wrapped=”no” height=”” copy-text=”Copy Code” copy-confirmed=”Copied”]

fetch('https://example.com/resource')
  .then(response => {
     const body = response.body;
     const status = response.status;
     const headers = response.headers;
  })
  .catch(err => console.log(err));

[/dm_code_snippet]

In this example, we are requesting a resource from the example.com server. The response is then stored in variables for the body, status, and headers. If an error occurs, it is logged as well.

Error Handling

The fetch() API provides a simple way to handle errors. You can use the catch() method to handle errors that occur when making a request. This method takes a callback function as its argument, which is called with the error as its argument.

Example

The following example shows how to handle errors using the catch() method:

[dm_code_snippet background=”yes” background-mobile=”yes” slim=”no” line-numbers=”no” bg-color=”#abb8c3″ theme=”dark” language=”php” wrapped=”no” height=”” copy-text=”Copy Code” copy-confirmed=”Copied”]

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

[/dm_code_snippet]

In this example, we are requesting a resource from the example.com server. If an error occurs, it is logged to the console.

Conclusion

The fetch() API provides a simple, consistent interface for making requests to servers. It is a promise-based API that provides an easy and convenient way to make HTTP requests and handle responses. The fetch() method returns a Response object that contains information about the response, including the status code, headers, and the body of the response. You can use the catch() method to handle errors that occur when making a request.