API Integration

Overview

Detailed Explanation

Practical Steps

1. 1
   Fetch Mock Data 3 mins

   Use JSONPlaceholder (a free fake API) to fetch some user data.

   • Pass the URL to the fetch function
   • Use await to wait for the response
   • Use res.json() to convert it into a JS object

   <script>
   const url = 'https://jsonplaceholder.typicode.com/users/1';
   
   async function getData() {
     const res = await fetch(url);
     const data = await res.json();
     console.log('Fetched Data:', data);
   }
   
   getData();
   </script>

2. 2
   Display Data in HTML 5 mins

   Take that fetched data and actually put it on the screen.

   • Create a <div> with an ID
   • Set its textContent using the data we fetched

   <div id="profile">
     Loading...
   </div>
   
   <script>
   const url = 'https://jsonplaceholder.typicode.com/users/1';
   
   async function renderData() {
     const res = await fetch(url);
     const data = await res.json();
     
     const profileDiv = document.getElementById('profile');
     profileDiv.textContent = `Name: ${data.name} (Email: ${data.email})`;
   }
   renderData();
   </script>

3. 3
   Handle Deliberate Errors 3 mins

   Intentionlly break the URL to see how try-catch handles failures gracefully.

   • Use a fake URL
   • Wrap the code in try { ... } catch (e) { ... }
   • Throw an error if !res.ok

   <div id="profile">Loading...</div>
   
   <script>
   const url = 'https://jsonplaceholder.typicode.com/users/999999'; // Broken URL
   
   async function renderData() {
     const profileDiv = document.getElementById('profile');
     try {
       const res = await fetch(url);
       if (!res.ok) {
         throw new Error(`HTTP Error: ${res.status}`);
       }
       const data = await res.json();
       profileDiv.textContent = `Name: ${data.name}`;
     } catch (error) {
       profileDiv.textContent = 'Failed to load data.';
       profileDiv.style.color = 'red';
       console.error(error);
     }
   }
   renderData();
   </script>

Frequently Asked Questions

What are some good free APIs to practice with?

JSONPlaceholder (dummy data), GitHub API (fetching repos), PokéAPI (yes, a Pokémon encyclopedia), and OpenWeatherMap are the holy grail of beginner APIs. Building a Pokédex is a rite of passage.

I tried to fetch an API and got a giant red 'CORS error'. Am I hacked?

Welcome to the club! Browsers have a security policy that stops you from secretly downloading data from a different domain. If the API doesn't explicitly allow CORS, your browser bricks the request. You usually fix it by setting up your own backend proxy, which is a headache for another day.

A senior dev told me to use 'Axios' instead of 'fetch'. Should I?

Axios used to be mandatory because the old 'fetch' kinda sucked. It auto-converts JSON and handles timeouts better. But modern 'fetch' is quite good now, and many projects are moving back to native 'fetch' to avoid installing extra libraries. Learn fetch first.

Is it safe to put API Secret Keys directly in my frontend JS code?

ABSOLUTELY NOT. Never. Ever. Your frontend JavaScript is completely visible to anyone who hits F12. If you put an AWS or OpenAI key in there, bots will scrape it in 5 seconds and you'll wake up to a $50,000 bill. Always keep keys on a backend server.

CORS errors?

Browser security—often needs server Access-Control-Allow-Origin.

axios vs fetch?

Learn fetch first, then optional axios wrapper.