Computer Science
Grade 9
20 min
8. Networking: Making API Calls to Fetch Data
Learn how to make API calls to fetch data from external sources and display it in the app.
Tutorial Preview
1
Introduction & Learning Objectives
Learning Objectives
Explain what an API is and why it's used in mobile apps.
Construct a valid URL to request data from a specific API endpoint.
Write code to make a basic GET request to an API.
Define JSON and parse a JSON response to access specific data.
Explain the concept of an asynchronous operation and why it's necessary for networking.
Handle and display data fetched from an API within a simple application context.
Ever wonder how your weather app knows the exact temperature right now, or how a social media app shows you new posts instantly? 🌦️ It's not magic, it's networking!
In this lesson, you'll learn how mobile apps talk to servers on the internet to get live information. We'll explore how to use Application Programming Interfaces...
2
Key Concepts & Vocabulary
TermDefinitionExample
API (Application Programming Interface)A set of rules and tools that allows different software applications to communicate with each other. Think of it as a restaurant menu that tells you what you can order from the kitchen (the server).A weather app uses a weather service's API to request the current temperature for your city. The API defines how to ask for the weather and in what format you'll get the answer.
EndpointA specific URL where an API can be accessed. It's like a specific item on the menu you want to order.In the URL `https://api.example.com/users/123`, the `/users/123` part is the endpoint. It tells the API you specifically want information about the user with ID 123.
JSON (JavaScript Object Notation)A lightweight, text-based format for se...
3
Core Syntax & Patterns
The API Call Pattern (GET Request)
fetch(URL) -> then(processResponse) -> then(processData) -> catch(handleError)
This is the standard sequence for fetching data. First, you call `fetch` with the API's URL. Then, you chain `then()` blocks to handle the successful response: first to parse it (e.g., as JSON), and second to use the actual data. A `catch()` block is used to handle any errors that occur, like a bad internet connection.
URL Structure for APIs
Base_URL + Endpoint + ?Query_Parameters
An API request URL is built in parts. The `Base_URL` is the main address of the API (e.g., `https://api.funfacts.com`). The `Endpoint` specifies what you want (e.g., `/cats`). `Query_Parameters` are optional and filter the results (e.g., `?count=3` to get 3 facts).
Acc...
4 more steps in this tutorial
Sign up free to access the complete tutorial with worked examples and practice.
Sign Up Free to ContinueSample Practice Questions
Challenging
A student is building a profile page and their app freezes for a few seconds every time the page loads. The code to fetch user data is written synchronously (which is not possible with `fetch` but imagine a hypothetical blocking function). Based on the tutorial, what is the core concept the student is misunderstanding?
A.The structure of JSON data.
B.How to write a correct URL endpoint.
C.The necessity of asynchronous operations for networking.
D.The purpose of the `.catch()` block.
Challenging
The Dog CEO API returns `{ "message": "URL..." }` while the JSONPlaceholder API returns `{ "id": 2, "name": "Ervin Howell", ... }`. What does this difference imply about using APIs?
A.All APIs return data with a 'message' key.
B.JSONPlaceholder is a better-designed API than Dog CEO.
C.There is no standard for JSON structure; you must always check the specific API's format to know which keys to access.
D.APIs that return images are always structured differently from APIs that return text data.
Challenging
A developer writes the following code to get user data: `fetch('.../users/4').then(response => { console.log(response.name); });` The console logs `undefined`. What is the critical missing step and where does it belong?
A.Missing `.catch()` at the end to handle errors.
B.Missing `response.json()` to parse the data. It should be called before trying to access `.name`.
C.Missing the full URL in the `fetch` call.
D.Missing a second `.then()` block. The parsing step `response.json()` must be in its own `.then()` and the logic to handle the data must be in a subsequent `.then()`.
Want to practice and check your answers?
Sign up to access all questions with instant feedback, explanations, and progress tracking.
Start Practicing FreeMore from V. Mobile App Development: Building Applications for Mobile Devices
1. Introduction to Mobile App Development: Platforms, Frameworks, and Tools
2. Mobile UI/UX Design: Principles and Best Practices
5. Handling User Input: Text Fields, Buttons, and Touch Events
6. Navigation: Implementing App Navigation with React Navigation
7. Data Storage: Local Storage and AsyncStorage