JavaScript Fetch API

Dr. Greg Bernstein

Updated October 29th, 2020

Modern AJAX

Readings and Code

Example Code FetchExamples.zip
Using Fetch (CSS-Tricks). Recommended, (May 2nd, 2017).
Using Fetch (MDN)
fetch() (MDN)
Response object (MDN). Need to know this to work with the response from fetch().

AJAX?

AJAX stands for Asynchronous JavaScript and XML. See Wikipedia AJAX.

With Ajax, Web applications can send data to and retrieve from a server asynchronously (in the background) without interfering with the display and behavior of the existing page.

AJAX

All modern web applications that work with a server use some form of AJAX.
The XMLHttpRequest was standardized in 2006. We will be using the modern version called fetch().
Note that fetch() is fairly widely supported caniuse and polyfills are available.

Not XML Anymore…

XML (eXtensible Markup Language) is a markup language that looks a lot like HTML but where you get to define the tags and attributes.
XML is significantly more complex and verbose than JSON and requires a correspondingly more complex parser to understand it.
Hence JSON is the primary data transfer format use with AJAX and not XML, but AJAJ (Asynchronous JavaScript and JSON) isn’t as catchy an acronym.

Using Fetch

Need a Sever

To try out the fetch() functionality we need a server.
We will use the QuizServer.js Node.js application that I wrote.
API for the QuizServer.js
- GET ‘/allQs’: returns JSON of all questions in database.
- POST ‘/addQ’: adds a multiple choice question to the database

Server Essentials

File QuizServer.js

const express = require('express');
const app = express();
app.use(express.static('public')); // For static assets
const questions = require('./questions.json');


app.get('/allQs', function (req, res) {
    res.json({questions: questions});
    }
)

app.post('/addQ', express.json(), function(req, res){
        questions.push(req.body.q);
        res.json(req.body.q);
})

Example Files

Bundled with the FetchExamples.zip in the /public directory
get examples, post examples, and error examples

Simplest Get

from simpleGet1.html:

        var infoP = document.getElementById("Info");

        window.onload = function() {
            var pButton = document.getElementById("TheButton");
            pButton.addEventListener("click", getIt);
        }

        function getIt() {
            // fetch returns a promise, must use "then"
            fetch('/allQs').then(function(response) {
                infoP.innerHTML = response;
                console.log(response);
                });
        }

Running it…

The body is left as a “readable stream”.

Getting JSON

from simpleGet2.html:

        var infoP = document.getElementById("Info");
        var infoP2 = document.getElementById("Info2");

        window.onload = function() {
            var pButton = document.getElementById("TheButton");
            pButton.addEventListener("click", getIt);
        }

        function getIt() {
            fetch('/allQs').then(response => response.json())
            .then(function(data) {
                infoP.innerHTML = data;
                // Had to escape the returned string, since
                // questions had HTML tags.
                infoP2.innerHTML = escapeHtml(JSON.stringify(data));
                console.log(data);
            });
        }

Result…

Sending JSON Data

We will use the “POST” method
We will be sending JSON so we need to indicate that in a HTTP header
We need to specify the request message body

POST Example 1

From file sampleFetchPost.html

function postIt() {
    fetch('/addQ', {
            method: 'POST',
            headers: {
                "Content-type": "application/json"
            },
            body: JSON.stringify({
                q: q
            })
        }).then(function(response) {
            console.log('Request status code: ', response.statusText, response.status, response.type);
        });
}

POST Example 2

Getting data back. From file sampleFetchPost2.html

function postIt() {
    const addUrl = 'http://localhost:5555/addQ';
    fetch('/addQ', {
            method: 'POST',
            headers: {
                "Content-type": "application/json"
            },
            body: JSON.stringify({
                q: q
            })
        }).then(function(response) {
            console.log('Request status code: ', response.statusText, response.status, response.type);
            return response.json();
        })
        .then(function(data) {
            infoP.innerHTML = escapeHtml(JSON.stringify(data));
                console.log(data);
        });
}

Fetch Error Handling

Dealing with Errors

There are a lot of ways we can run into errors when fetching across a network:

Request times out, Non-existant server, Bad IP address…
Bad URL path (not found errors), Internal server errors…
And more…

Error Example 1

Bad URL path, from file errorGet1

function getIt() {
    // Bad URL path here
    fetch('/allQss').then(response => response.json())
        .then(function(data) {
        infoP.innerHTML = data;
        infoP2.innerHTML = escapeHtml(JSON.stringify(data));
        console.log(data);
        });
}

Error Example 1 Result

Handling Errors

From file errorGet2.html

function getIt() {
    // Bad URL path here
    fetch('/allQss').then(function(response) {
        if(response.ok) {
            return response.json(); // a promise
        } else {
            let info = `Status code: ${response.status}, ${response.statusText}`;
            console.log(response);
            return Promise.reject(info); //rejected promise!
        }
    }) // Returns a promise
    .then(function(data) {
        infoP.innerHTML = data;
        infoP2.innerHTML = escapeHtml(JSON.stringify(data));
        console.log(data);
        })
    .catch(function(msg){
        console.log("Something bad: " + msg);
        infoP2.innerHTML = msg;
    })
}

Example #2 Result

Note reporting of status code

Error Example #3: Bad IP

From file errorGet3.html

function getIt() {
    // Bad IP address here
    fetch('http://127.200.121.101/allQs')
    .then(function(response) {
        if(response.ok) {
            return response.json();
        } else {
            let info = `Status code: ${response.status}, ${response.statusText}`;
            console.log(response);
            return Promise.reject(info);
        }
    })
    .then(function(data) {
        infoP.innerHTML = data;
        infoP2.innerHTML = escapeHtml(JSON.stringify(data));
        console.log(data);
        })
    .catch(function(msg){
        console.log("Something bad: " + msg);
        infoP2.innerHTML = msg;
    })
}

Example #3 Result

Fetch and CORS

CORS Diagram

MDN CORS

CORS and Fetch