Space Beacon | code.sinau.dev

🎯 Today's Concept: Fetch & APIs

Imagine dialing a phone number. fetch() is like picking up the phone and making a CALL — but to a server on the internet! The server picks up and sends back DATA.

Here's the pattern every JavaScript developer uses:

fetch(url) — make the request (returns a Promise)
.then(r => r.json()) — read the response as JSON
.then(data => ...) — use the data!

Or use async/await with try/catch — cleaner and easier to read!

Real APIs used today: dog.ceo/api (random dog images), api.neolynk.dev/random (fun random facts), api.github.com/users (GitHub profiles). Try all three!

📡 Space Beacon Code JavaScript

// Press RUN to call an API and display the response!
async function callAPI() {
  try {
    let response = await fetch('https://dog.ceo/api/breeds/image/random');
    let data = await response.json();
    showResult(data);
  } catch(error) {
    showError(error.message);
  }
}

callAPI();

📡

Mission Control — Signal Locked!

The Space Station received your call loud and clear! You've mastered fetch() and APIs — the exact same technique behind every weather app, social media feed, and live dashboard on the planet!

💫 What You Learned

fetch(url) — makes an HTTP request to a server URL and returns a Promise
response.json() — converts the server's reply from text into a JavaScript object
async/await — write asynchronous code that reads like normal step-by-step code
try/catch — handles errors gracefully when the API fails or is offline
APIs — Application Programming Interfaces are how apps talk to each other on the internet

📡 Your Creation

My Space Beacon

🔧 Come Back Tomorrow!

Next up: API Explorer — chain multiple fetch calls together, handle loading states, and build a real multi-source dashboard! You'll combine what you learned today with async/await mastery. 🌌