How to Use Fetch API for AJAX Calls in Modern JavaScript

Home page — JavaScript Foundations — Event handling and AJAX requests — How to Use Fetch API for AJAX Calls in Modern JavaScript

Introduction to Fetch API in Modern JavaScript

In the landscape of web development, the ability to retrieve data from a server without having to do a full page refresh has been a game-changer. This functionality, commonly referred to as AJAX (Asynchronous JavaScript and XML), has evolved significantly over the years. In modern JavaScript, the Fetch API has become the de facto standard for performing AJAX calls, offering a powerful and adaptable way to fetch resources.

Error Handling in JavaScript for AJAX Requests

2024-02-16

Understanding the Basics of Fetch API

The Fetch API provides a global ;fetch()> method that offers an easy, logical way to fetch resources asynchronously across the network. This method returns a Promise that resolves to the Response to that request, whether it is successful or not. This marks a significant improvement over older techniques such as the XMLHttpRequest (XHR) object, as it leverages Promises for more flexible error handling and cleaner code.

Making Your First AJAX Call with Fetch

Fetching Data from a Server

Let’s kick things off with a simple example: fetching data from a server. The basic syntax for a Fetch call looks something like this:

<pre><code>javascript fetch('https://example.com/data') .then(response => response.json()) .then(data => console.log(data)) .catch(error => console.error('There was an error!', error));

In this snippet, we are requesting data from ;https://example.com/data>. The ;fetch()> method initiates the request and returns a promise. When the promise resolves, it returns a Response object. We then use the ;.json()> method on this response to extract the JSON body content of the response. Finally, we handle any errors that might occur during the fetch with ;.catch()>.

Handling POST Requests

The Fetch API is not just for GET requests; it can also handle POST requests. To send data to a server, you adjust the ;fetch()> call to include an options object where you specify the method, headers, and the body of your request.

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

Building a Simple AJAX-driven Website: Step-by-Step Tutorial

2024-02-16

Advanced Usage of Fetch API

Error Handling

A common pitfall when using Fetch is handling HTTP errors. Fetch will only reject a promise if there is a network error, but not for HTTP error statuses. You’ll need to add logic to handle such cases manually:

<pre><code>javascript fetch('https://example.com/data') .then(response => { if (!response.ok) { throw new Error('Network response was not ok'); } return response.json(); }) .then(data => console.log(data)) .catch(error => console.log('There was a problem with your fetch operation:', error));

Working with CORS

Cross-origin resource sharing (CORS) is a mechanism that allows restricted resources on a web page to be requested from another domain outside the domain from which the first resource was served. When making cross-origin requests, it’s crucial to understand that the server needs to include specific headers to allow the request. Failure to properly handle CORS can lead to failed requests.
The Fetch API aligns with the same-origin policy, but provides an option to adjust the mode of the request to deal with CORS:

<pre><code>javascript fetch('https://example.com/data', { mode: 'cors', // Additional options or headers })

Conclusion

The Fetch API has significantly simplified the process of making AJAX calls, providing a more powerful and flexible toolset for developers. Its promise-based architecture offers a clean and readable way to handle asynchronous operations, making it a worthy addition to any web developer’s toolkit. By understanding and utilizing the Fetch API, developers can create dynamic, responsive web applications that delight users and provide seamless experiences.

FAQ

Can I use the Fetch API directly in all modern browsers?

Yes, the Fetch API is widely supported across most modern browsers. However, it’s always a good idea to check the latest compatibility on caniuse.com because some older versions might not support it.

What is the basic syntax for making a GET request using Fetch API?

The basic syntax for a GET request is `fetch(‘url’)`. This returns a Promise that resolves to the Response object associated with the request.

How can you convert the fetched response to JSON?

You can convert the response to JSON using the `.json()` method, like so: `fetch(‘url’).then(response => response.json())`.

Is it possible to use Fetch API for making POST requests?

Yes, you can use Fetch for POST requests by adding an options object specifying the method as ‘POST’ and including the body data. For instance: `fetch(‘url’, { method: ‘POST’, headers: { ‘Content-Type’: ‘application/json’ }, body: JSON.stringify(data) })`.

How do you handle errors with Fetch API?

You handle errors by adding a catch block at the end of your fetch chains, like so: `fetch(‘url’).then(response => response.json()).catch(error => console.error(‘Error:’, error))`.

Can Fetch API be used with async/await?

Yes, Fetch API works seamlessly with async/await. You can await the response of fetch and then await the conversion to JSON. Example: `async function fetchData() {const response = await fetch(‘url’); const data = await response.json();}`.

How can you set custom headers in a Fetch request?

Custom headers can be set by including a headers object in the options of your fetch request, like this: `fetch(‘url’, { headers: { ‘Content-Type’: ‘application/json’, ‘Authorization’: ‘Bearer your_token_here’ }})`.

Is Fetch API better than XMLHttpRequest?

While both serve similar purposes, Fetch API is considered more modern and simpler to use, especially with its promise-based nature. However, `XMLHttpRequest` might still be preferred in projects needing to support very old browsers.

Can the Fetch API handle cross-origin requests?

Yes, Fetch can handle CORS requests. If a request is made to a server on a different domain, you might need to set the `mode` in the fetch options to ‘cors’ and ensure the server is configured to allow such requests.

How do you abort a fetch request if it’s taking too long?

You can abort a fetch request using the AbortController interface. Example: `const controller = new AbortController(); fetch(‘url’, { signal: controller.signal }); controller.abort();`.

What are the limitations of Fetch API?

While Fetch API is powerful, it does not directly support request timeouts and uploading files in progress events. For such detailed control, you might need to explore additional libraries or fallbacks.