Welcome to Phase 5, the final phase of this tutorial: we finally connect our app to a real API. Before we start, a quick comparison of the two most common ways to make HTTP requests in React (and JavaScript in general).

The built-in fetch() function

fetch() is part of every modern browser (and therefore every React web app) – no extra package needed:

fetch('https://example.com/api/products')
  .then((response) => response.json())
  .then((data) => console.log(data))
  .catch((error) => console.error(error));

Axios: the popular alternative

npm install axios

import axios from 'axios';

axios.get('https://example.com/api/products')
  .then((response) => console.log(response.data))
  .catch((error) => console.error(error));

The key differences

The response.ok part is where most beginners trip up: a 404 ("not found") or 500 ("server error") is, technically, a SUCCESSFUL network response as far as fetch() is concerned – only the CONTENT of the response is an error message. That's why fetch() does NOT automatically land in .catch() on a 404 – you have to check yourself:

fetch('https://example.com/api/products/does-not-exist')
  .then((response) => {
    if (!response.ok) {
      throw new Error(`HTTP error: ${response.status}`);
    }
    return response.json();
  })
  .catch((error) => console.error(error));