Fetch API

What is the Fetch API?

The Fetch API is a modern, Promise-based JavaScript interface for making network requests. It provides a more powerful and flexible feature set than the older XMLHttpRequest (AJAX), simplifying how we get and post data from web servers and REST APIs.

With Fetch, you can send or receive data in various formats like JSON, Text, and HTML without reloading the entire webpage. It has become the standard for asynchronous data fetching in modern web development.

Introduced in ES6, the Fetch API is supported by all major browsers since 2017. For legacy browsers like Internet Explorer, XMLHttpRequest remains a fallback option.

Fetch Vs Ajax

How to Use the fetch() Method

Fetch Api is based on Request and Response . Request is the incoming stream to server and Response is the outgoing stream from server.

Request is the URL of resource.

then handler is used to get response of request. then includes a callback with Response.

fetch example

    fetch(Request)

fetch example

    fetch(req).then(res=>res.text()).then(res=>console.log(res));

Understanding the Request

Request is the incoming stream to the server. The first Parameter URL is compulsory. Second parameter is optional with options like http method, payload, etc.

    fetch('data.txt');

fetch with get method

    fetch('data.txt',{method:"GET"});

fetch with post method

const data={name:"username"};    
fetch('/post',{method:'POST',body:JSON.stringify(data)});

Handling Responses

The `fetch()` method returns a Promise that resolves to the `Response` object representing the response to your request. A key detail is that `fetch()` only rejects a promise for a network failure, not for HTTP errors like 404 (Page Not Found) or 500 (Internal Server Error). For HTTP errors, the promise still resolves, and you must check the `response.ok` or `response.status` properties to handle them.

In the example below, `data.txt` is a text file in the root directory.

    fetch("data.txt").then(i=>i).then(i=>console.log(i));

Response.text()

    fetch("data.txt").then(i=>i.text()).then(i=>console.log(i));

Response.ok

response.ok return boolean value true or false. If the resource is found successfully, the true else false. See examples below.

    fetch("data.txt").then(i=>i.ok).then(i=>console.log(i));

    fetch("abc.txt").then(i=>i.ok).then(i=>console.log(i));

Response.status

Response.status return the HTTP Response of request, like 200, 404, 500 etc. See examples below.

    fetch("data.txt").then(i=>i.status).then(i=>console.log(i));

    fetch("abc.txt").then(i=>i.status).then(i=>console.log(i));

Error Handling with Fetch

Because `fetch()` doesn't reject on HTTP errors like 404, you need to check the response status manually. A common pattern is to check `response.ok` and throw an error if it's `false`.

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

Fetch text data

To fetch text data, use Response.text() method in first then() handler with callback and Response parameter. This will convert Response data to string. To print string response, use another then() handler with callback and Response parameter.

    fetch("data.txt").then(i=>i.text()).then(i=>document.querySelector(".app").textContent=i);

Fetch JSON data

To fetch JSON data, use Response.json() method in first then() handler with callback and Response parameter. This will convert Response data to JSOn Object. To print JSON response, use another then() handler with callback and Response parameter.

    fetch("data.json").then(i=>i.json()).then(i=>{
        i.forEach(j=>{
            console.log(j);
        })
    });

Practical Example: Building a Weather App

In this example, we are using the Fetch API to get live weather data for a city. To use this API, you'll need to get a free API key from OpenWeatherMap. An API Key is required.

const city="delhi";
const appid="YOUR_API_KEY"; // Replace with your OpenWeatherMap API key
const url=`https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${appid}&units=metric`;

fetch(url).then(i=>i.json()).then(i=>console.log(i));

Video