Using Fetch API

01READ.md

Nice article for fetch API and how to display fetched data to DOM https://medium.com/@armando_amador/how-to-make-http-requests-using-fetch-api-and-promises-b0ca7370a444

This is also an interesting article about fetch and how to cancel fetch request in case user switch from current page which still trying to fetch data from API or database to another page. The link https://dmitripavlutin.com/javascript-fetch-async-await/

Article about Callback vs Promises vs Async Await : https://www.loginradius.com/blog/async/callback-vs-promises-vs-async-await/

asyncAwaitCN.js

let res;

async function fetchJokesJSON() {
  const response = await fetch('https://api.chucknorris.io/jokes/random');
  const jokes = await response.json();
  return jokes;
}

fetchJokesJSON().then(jokes => {
  res = jokes.value; // fetched movies
  console.log(res);
});

chuckNorris.js

// Fetch request to get chuckNorris api
let res;
fetch("https://api.chucknorris.io/jokes/random")
.then(response => response.json())
.then(data => res = data)
.then(() => console.log(res.value))

fakeRest.js

// Fetch request to get data from the json placeholder

let res;
fetch('https://jsonplaceholder.typicode.com/users')
  .then(response => response.json())
  .then(data => res = data)
  .then(() => console.log(res))

fakeResv2

tryFetch = fetch('https://jsonplaceholder.typicode.com/users')
  .then(response => response.json())
  .then(users => {
       const name = users.map(user => user.name).join("\n");
       console.log(name); 
   })