Please enable JavaScript.

Coggle requires JavaScript to display documents.

28.2: Making requests (to Web API's) - Coggle Diagram

28.2: Making requests
(to Web API's)

the old way

was to use XMLHttpRequest

example

const req = new XMLHttpRequest();

// success callback
req.onload = function () {
  console.log("IT LOADED!!");
  const data = JSON.parse(this.responseText);
  console.log(data.name, data.height);
};

// failure callback
req.onerror = function () {
  console.log("ERROR!!!!");
  console.log(this);
};

req.open("GET", "https://swapi.dev/api/people/1/");
req.send();

in ES6

we got the fetch API

example

fetch("https://swapi.dev/api/people/1/")
  .then((res) => {
    console.log("RESOLVED!", res);
    return res.json(); // return a Promise
  })
  .then((data) => {
    console.log(data.name, data.height);
  })
  .catch((e) => {
    console.log("ERROR!", e);
  });

outputs

> RESOLVED! 
  Response {
    body: ReadableStream
    type: 'cors', 
    url: 'https://swapi.dev/api/people/1/', 
    …}
  Luke Skywalker 172

advantages

flatter than XHR's

even flatter with async/await

const loadStarWarsPerson = async () => {
  try {
    const res = await fetch("https://swapi.dev/api/people/1/");
    const data = await res.json();
    console.log(data.name, data.height);
  } catch (e) {
    console.log("ERROR!!!", e);
  }
};

loadStarWarsPerson();

- - - - fetch receives any headers
    - - the data has been received
      - potentially
        
        depending how long it takes
      - note that body
        
        is of type ReadableStream