Fetch API

Fetch API

Fetch API is Promise based api used to fetch resource across web server, almost same like AJAX but with easy syntax and more powerful features.

Fetch API can also send and receive data like XML, JSON, TEXT and HTML from web server without reloading.

fetch api was introduced in ES6. For IE and legacy browser, we can still use XMLHttpRequest.

Fetch Vs Ajax

Fetch

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 orf resource.

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

fetch example

    fetch(Request)

fetch example with then handler

    fetch(Request).then(Response=>Response.text()).then(Response=>console.log(Response));

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 options

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

fetch with payload

fetch('/postdata',{method:'POST',body:JSON.stringify({"name":"username"})});

Response

fetch api returns a Promise that resolves to Response of that request. This will even respond to HTTP Errors like 404 () Page not Found) or 500 ( Internal Server error). For such errors, the then() handler must check Response.ok or Response.status.

    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));

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=>{
        for( let j in i){
            console.log(j, i[j]);
        }
    });

Weather API

In this example, we are using fetch api to fetch weather data of a city.

const city="delhi";
const appid="6565a145678cc21caccc3df7f2132a1c";

fetch(`https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${appid}`).then(i=>i.json()).then(i=>{console.log(i.main.temp)})