fetch.md

Fetch API

Now as we've learned, JavaScript as a language evolves continually. But so do browsers! New features get added to increase the user experience and make life easier for developers.

One of those features added to browsers is an upgraded version of the XHR object. It's called the Fetch API and it's the modern way to making HTTP Requests. It incorporates Promises, making it easier to handle your server responses. Here's a basic example:

fetch('https://pokeapi.co/api/v2/pokemon')
  .then(response => {
    return response.json();
  })
  .then(data => {
    console.log('Pokemon data', data);
    return data;
  })
  .catch(error => {
    console.log('err', error);
  });

Where is this function defined, you may wonder? Simple: it's found in the global window object in the browser. You can check it out by opening your console in the browser. Type in fetch and you'll get back a function definition.

When your JavaScript file is loaded into the DOM, it automatically will have access to any of the browser's web APIs (one if which is the Fetch API). That's why you can use it in your JavaScript files.

Practice

If you want a little more practice as well as a recap of what the fetch API brings you then have a look at the following.

{% hyf-youtube src="https://www.youtube.com/watch?v=jiJJ2V8K1ik" %}

Extra reading

If you just can't get enough, here are some extra links that mentors/students have found useful concerning this topic:

• Fetch API Introduction
• Sending JavaScript Http Requests with the fetch() API
• Fetch() - Working with Data and APIs in JavaScript
• Learn Fetch API In 6 Minutes