Lesson 3: API Integration & Asynchronous Data Fetching
Developing a complex digital outcome to solve a real-world problem for NCEA Level 3 Digital Technologies.
🎯 Ngā Whāinga Akoranga | Learning Intentions
RESTful API architecture, JSON data payloads, HTTP methods (GET, POST, PUT, DELETE), JavaScript fetch API, async/await pattern, and client-side error handling.
Construct asynchronous API requests using async/await, parse JSON responses dynamically into the DOM, and implement robust error boundaries.
🎥 Media Anchor & Pedagogical Scaffold
REST APIs, Async/Await & JSON Handling
Video Clip: “JavaScript ASYNC/AWAIT is easy! ⏳” — 4 min 38 s.
🧠 1. Before Viewing (Activate & Predict)
How do modern web applications retrieve live external data without freezing or reloading the entire browser page?
👁️ 2. During Viewing — watch the full 4m38s clip, capturing as you go
- Capture: Examine HTTP request-response headers, status codes (200, 401, 404, 500), and JSON formatting.
- Capture: Write clean JavaScript async/await functions wrapping fetch() API calls.
- Capture: Implement try/catch blocks and UI loading spinners for asynchronous network delays.
🗣️ 3. After Viewing & Kaiako Move (Process & Apply)
Kaiako Move: Demonstrate testing API endpoints using Postman or browser DevTools Network panel.
Immediate Task: Complete Section 3 of your Digital Tech Portfolio: Async API Integration Code Snippets & Data Fetch Log.
⚡ Whakaoho | Do Now: What Happens When the Network Fails?
Sketch the fetch call you would write to load your data. Two minutes.
Now mark the line that runs when the request times out. If there is no such line, your app currently shows a spinner forever and never explains itself. Handling the unhappy path is most of the distance between a demo and an outcome.
📖 Activity 1: Fetch and Render, Then Break It on Purpose
Make it work (13 min). Write an async function that requests JSON and renders it into the DOM. Use async/await rather than nested callbacks. Check the response status before parsing — a 404 returns a body too, and that body is not your data.
Make it fail (12 min). Now force four failures: no network, very slow network, a 500 from the server, and valid JSON with an unexpected shape. Handle each one distinctly. A user should always be told what happened and what to try next, and should never be shown a raw stack trace.
📝 Activity 2: Level 3 Digital Technology Portfolio Task & Merit/Excellence Scaffolding (20 mins)
Portfolio Section 3. Submit: (1) your async fetch implementation including status checking; (2) evidence of all four failure modes handled, with a screenshot of what the user actually sees in each; (3) a note on your retry decision — including a decision not to retry, with the reasoning.
🏫 Kaiako Planning & Pedagogy Notes
NCEA Level 3 Alignment: Direct preparation for Level 3 Digital Technology (Develop a complex digital outcome to solve a specified problem). Emphasise systematic testing, stakeholder feedback loops, and technical code refinement for Merit/Excellence grades.