Asynchronous JavaScript

& Working with APIs

CSCI 4513

Week 5, Lecture 10

Today's Learning Objectives

🎯 Understand async programming
🎯 Use Promises and async/await
🎯 Fetch data from APIs
🎯 Handle errors gracefully

Norse Mythology Connection

Thor's Journey to Utgard-Loki

Simple tasks connected to vast hidden complexity, like async operations that seem simple but touch complex systems.

The Tale:

At Utgard-Loki's fortress, Thor faced seemingly simple challenges. He tried to drain a drinking horn but barely lowered it. He tried to lift a cat but could barely raise one paw. He wrestled an old woman who brought him to his knee.

Utgard-Loki then revealed the truth: The horn was connected to the ocean—Thor had lowered sea levels worldwide. The cat was Jormungandr, the World Serpent—Thor had lifted it off the ocean floor. The woman was Old Age itself—no one defeats time. Thor's "failures" were extraordinary achievements; he just couldn't see what he was really facing.

Hidden Complexity

// Seems simple - just fetch data
async function getUserData() {
    const response = await fetch('https://api.example.com/user');
    return await response.json();
}

// But you're really dealing with:
// - Network latency (horn to ocean)
// - Server processing time
// - Potential failures
// - Rate limits
// - Authentication

// Promises - tasks that take time
function drinkFromHorn() {
    return new Promise((resolve) => {
        setTimeout(() => resolve("Lowered sea level"), 3000);
    });
}

async/await - Makes async code look simple, but hides complex network operations underneath

new Promise - Creates a task that will complete later. resolve signals it's done.

setTimeout - Simulates a delay (like network latency). Runs the callback after 3000ms.

Like Thor's horn — a simple sip connected to the entire ocean!

Reflection Questions

Click each card to reveal thoughts!

❓ Question 1

Thor's horn looked simple but connected to the ocean. What makes API calls more complex than they appear?

❓ Question 2

Thor didn't know what he was really facing. How does async/await help reveal what's happening?

❓ Question 3

Utgard-Loki's challenges all took time. Why can't we just wait synchronously for network requests?

Why Asynchronous Code?

Some operations take time: fetching data from servers, reading files, waiting for user input.

❌ Synchronous (Blocking)

// Everything waits
getData();  // Takes 3 seconds
updateUI(); // Can't run yet!
// Browser is frozen!

✅ Asynchronous (Non-blocking)

// Things happen in background
getData();  // Starts, keeps going
updateUI(); // Runs immediately!
// Browser stays responsive!

Sync - Each line waits for the previous one. If getData() takes 3 seconds, the entire browser freezes.

Async - getData() starts in the background. The rest of your code keeps running while it completes.

JS is single-threaded — blocking code means no scrolling, clicking, or animations!

Callbacks: The Old Way

A callback is a function passed into another function as an argument.

// Callback example you already know:
myDiv.addEventListener("click", function() {
  console.log("clicked!");
});

// The function is the callback
// It runs LATER when the click happens

Callback - A function passed as an argument. It doesn't run now — it runs later when the event happens.

You've used these! - Event listeners are callbacks. The function runs when the user clicks, not when the code is read.

⚠️ Problem: Chaining multiple callbacks creates "callback hell" — deeply nested, hard to read.

Callback Hell

getData(function(data) {
  processData(data, function(processed) {
    saveData(processed, function(result) {
      sendEmail(result, function(sent) {
        logActivity(sent, function(logged) {
          // We're 5 levels deep!
        });
      });
    });
  });
});

The "pyramid of doom" - Each async step nests another callback inside the previous one. 5 steps = 5 levels deep.

Problems:
- Hard to read and follow the logic
- Difficult to handle errors at each level
- Painful to debug and maintain

This is why we need a better way: Promises!

Promises

A Promise is an object that represents the eventual completion (or failure) of an asynchronous operation.

Three States:

Pending: Initial state, not yet complete
Fulfilled: Operation completed successfully
Rejected: Operation failed

Using Promises

// Without promises - callback hell
getData(function(data) {
  processData(data, function(result) {
    console.log(result);
  });
});

// With promises - cleaner!
getData()
  .then(data => processData(data))
  .then(result => console.log(result))
  .catch(error => console.error(error));

.then() - Runs when the previous step succeeds. Chains are flat, not nested!

.catch() - Handles errors from any step in the chain. One handler for everything.

Key difference - Promises chain vertically (flat) instead of nesting horizontally (deep). Same logic, much easier to read.

Understanding Promises Visually

Watch this visualization to see how promises work:

What is an API?

API = Application Programming Interface

Servers that serve data for external use in websites or apps.

Common Uses:

Weather data
Stock prices
Social media posts
Maps and directions
Almost any data you can imagine!

API Keys

Most APIs require an API key for access.

// Without key - Error!
https://api.example.com/weather/london

// With key - Success!
https://api.example.com/weather/london?key=abc123xyz

Why API Keys?

Track usage and prevent abuse
Implement rate limiting
Enable paid tiers for heavy usage

?key= - Query parameter appended to the URL. The API checks this before returning data.

How to get one: Sign up on the API provider's website. They'll give you a unique key string.

⚠️ Keep keys secret! In production, API keys go on the server, not in frontend code.

The Fetch API

Modern way to make HTTP requests in JavaScript:

// fetch returns a Promise!
fetch('https://api.example.com/data')
  .then(response => response.json())  // Parse JSON
  .then(data => console.log(data))    // Use data
  .catch(error => console.error(error));

fetch(url) - Sends an HTTP request and returns a Promise that resolves to a Response object

response.json() - Also returns a Promise! Parses the response body as JSON.

Two .then() calls - First resolves the network request, second resolves the JSON parsing. Both are async!

Fetch Example: Giphy API

const img = document.querySelector('img');

fetch('https://api.giphy.com/v1/gifs/translate?api_key=YOUR_KEY&s=cats')
  .then(function(response) {
    return response.json();
  })
  .then(function(data) {
    // Drill down to the URL we need
    img.src = data.data.images.original.url;
  })
  .catch(function(error) {
    console.error('Oops!', error);
  });

?api_key=...&s=cats - Query params: API key for auth, s is the search term

data.data.images.original.url - APIs return nested JSON. You must drill into the structure to find the value you need.

Tip: console.log(data) first to explore the response structure before trying to access nested properties.

Async/Await: Even Cleaner!

async/await makes asynchronous code read like synchronous code.

With Promises

getData()
  .then(data => {
    return processData(data);
  })
  .then(result => {
    console.log(result);
  });

With Async/Await

async function run() {
  const data = await getData();
  const result = await processData(data);
  console.log(result);
}

Same behavior, different syntax - Both versions do exactly the same thing. async/await is just "syntactic sugar" over Promises.

async - Marks a function as asynchronous. Required to use await inside it.

await - Pauses until the Promise resolves, then returns its value. Reads like synchronous code!

The async Keyword

// async makes a function return a Promise
async function getData() {
  return "data"; // Wrapped in Promise.resolve()
}

// These are equivalent:
async function getData() {
  return "data";
}

function getData() {
  return Promise.resolve("data");
}

async - Keyword before function. The function now always returns a Promise.

Promise.resolve() - Wraps a value in a resolved Promise. That's what async does automatically.

Always a Promise - Even return "data" becomes a Promise. Callers must use .then() or await to get the value.

The await Keyword

async function getCats() {
  // await pauses until Promise resolves
  const response = await fetch('https://api.giphy.com/...');

  // This waits for the line above
  const data = await response.json();

  // Now we can use the data
  return data.data.images.original.url;
}

// Call it
getCats().then(url => img.src = url);

await fetch(...) - Pauses here until the network request completes. Returns the Response.

await response.json() - Pauses again to parse the JSON body. Returns a plain JS object.

.then() on call - Since getCats() is async, it returns a Promise. Use .then() or await to get its result.

⚠️ Rule: await only works inside async functions!

Error Handling with try/catch

async function getCats() {
  try {
    const response = await fetch('https://api.giphy.com/...');
    const data = await response.json();
    img.src = data.data.images.original.url;
  } catch (error) {
    // Handle any errors that occurred
    console.error('Failed to get cats!', error);
  }
}

// OR use .catch() on the function call
getCats().catch(error => console.error(error));

try { } - Wrap risky code here. If any await rejects, execution jumps to catch.

catch (error) - Receives the error object. Show a user-friendly message, log it, or retry.

Two options: try/catch inside the function, or .catch() on the call. Both work — use whichever fits your code better.

Always handle errors! Network requests can fail for many reasons.

Project: Weather App

Your Assignment:

Create a weather forecast site using the Visual Crossing API.

Required Features:

Search for specific locations
Display weather data (temp, conditions, etc.)
Toggle between Fahrenheit and Celsius
Change page look based on weather
Handle errors gracefully

Weather App Tips

Sign up for free Visual Crossing API key
Start by console.logging the API response
Process JSON to extract only the data you need
Build the UI progressively
Use async/await for cleaner code
Add loading states while fetching
Style based on weather conditions!

⚠️ Security Note: For this project, it's OK to expose the API key in frontend code since it's a free tier. In real production apps, you'd handle this server-side!

Today's Takeaways

You Can Now:

✅ Understand callbacks and promises
✅ Use async/await for clean async code
✅ Fetch data from APIs
✅ Handle errors with try/catch
✅ Build the Weather App project

📅 Next Class: Coding Competition Day

📝 Homework: Weather App using Visual Crossing API