APIs let your page use data from other services: weather, maps, quotes, your own backend.
Direct answer
Call an API from JavaScript with fetch. Build the URL with query parameters, send JSON for POST requests, check response.ok and handle errors with try/catch. Never put private API keys in front-end code.
GET with parameters
const params = new URLSearchParams({ q: "london", units: "metric" });
const response = await fetch(`https://api.example.com/weather?${params}`);
const data = await response.json();
POST with JSON
const res = await fetch("/api/notes", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ title: "Hello" }),
});
Handle problems
- Network errors: caught by
try/catch. - HTTP errors: check
response.ok. - CORS errors: the server must allow your origin.
- Rate limits: read the API's documentation.
Where Teyro fits
Teyro's Interactive Web Pages with JavaScript course turns this into short lessons you can play in a few minutes a day. It has 37 lessons, and you can start free.
The bottom line
See the fetch API guide for the basics, then practise with a free public API.
