Others

Others


Fetch API in JavaScript


What is a Fetch API?

The Fetch API is a modern web API in JavaScript that provides a way to make network requests (like HTTP requests) to retrieve or send data over the internet. It is a more powerful and flexible alternative to older technologies like XMLHttpRequest.

Django Cookies

The fetch function is built into modern browsers and is available globally in JavaScript, allowing you to interact with resources on the web. It’s promise-based, which makes it easier to handle asynchronous code compared to traditional callback-based approaches.

Syntax

fetch(url, options)
  .then(response => {
    // handle the response
  })
  .catch(error => {
    // handle errors
  });

Parameters:

  • url (required): The URL to which the request is made. It can be a string or a Request object.
  • options (optional): An object containing any custom settings for the request, such as the HTTP method, headers, and body. If not provided, a default GET request is used.

Example

This code fetches product details from the FakeStore API and converts the response into JSON format. It then dynamically displays each product’s image, category, name, and price in an HTML table.

index.html 
<html>
    <head>
      <title>Display Product Info</title>
      <style>
        table {
          width: 80%;
          margin: 20px auto;
          border-collapse: collapse;
        }

        th, td {
          padding: 10px;
          border: 1px solid #ddd;
          text-align: center;
        }

        img {
          width: 50px;
          height: 50px;
          object-fit: cover;
        }

        tr:hover {
          background-color: #f1f1f1;
        }
      </style>
    </head>
    <body>
      <table border="1" cellpadding="10" cellspacing="0">
        <thead>
          <tr>
            <th>Image</th>
            <th>Category</th>
            <th>Product Name</th>
            <th>Price</th>
          </tr>
        </thead>
        <tbody id="product-list"></tbody>
      </table>
      <script>
        fetch('https://fakestoreapi.com/products')
          .then(response => response.json())
          .then(data => {
            const productList = document.getElementById('product-list');
            data.forEach(function(product) {
              var row = '<tr>' +
                '<td><img src="' + product.image + '" alt="' + product.title + '"></td>' +
                '<td>' + product.category + '</td>' +
                '<td>' + product.title + '</td>' +
                '<td>Rs.' + product.price.toFixed(2) + '</td>' +
                '</tr>';
              productList.innerHTML += row;
            });
          })
          .catch(function(error) {
            console.error('Error:', error);
          });
      </script>
    </body>
</html>

Output

Fetch API Javascript Output

Handling Fetch() API Response Asynchronously

You can also solve the promise returned by the fetch() API asynchronously using the async/await keyword.

Syntax

let data = await fetch(URL);
data = await data.json();

The await keyword in JavaScript is used inside an async function to pause the execution of the function until the Promise it is waiting for resolves (either successfully or with an error). When the promise resolves, it returns the result, and the execution of the function continues.

Example

This code asynchronously fetches product data from the FakeStore API and converts it into JSON format. It then displays the products in a styled HTML table with their image, category, name, and price.

index.html 
<table border="1" cellpadding="10" cellspacing="0">
    <thead>
      <tr>
        <th>Image</th>
        <th>Category</th>
        <th>Product Name</th>
        <th>Price</th>
      </tr>
    </thead>
    <tbody id="product-list"></tbody>
</table>
<script>
    async function getData() {
      let productList = document.getElementById('product-list');
      let URL = 'https://fakestoreapi.com/products';
      try {
        let response = await fetch(URL);
        let data = await response.json();

        data.forEach(function(product) {
          let row = "<tr>";
          row += "<td><img src='" + product.image + "' alt='" + product.title + "'></td>";
          row += "<td>" + product.category + "</td>";
          row += "<td>" + product.title + "</td>";
          row += "<td>Rs." + product.price.toFixed(2) + "</td>";
          row += "</tr>";
          productList.innerHTML += row;
        });
      } catch (error) {
        productList.innerHTML = "<tr><td colspan='4'>Error fetching data: " + error + "</td></tr>";
      }
    }
    getData();
</script>

Output

Fetch API Javascript Output