fetch is how a web page talks to the outside world.
Direct answer
fetch(url) makes a request and returns a promise for the response. Call response.json() to read JSON data. Always check response.ok, because fetch does not throw on HTTP errors like 404.
GET example
async function loadUsers() {
try {
const response = await fetch("https://jsonplaceholder.typicode.com/users");
if (!response.ok) throw new Error("HTTP " + response.status);
const users = await response.json();
console.log(users);
} catch (error) {
console.error("Request failed", error);
}
}
POST example
await fetch("/api/messages", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ text: "Hello" }),
});
Show it on the page
const list = document.querySelector("#list");
users.forEach((u) => {
const li = document.createElement("li");
li.textContent = u.name;
list.append(li);
});
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
Fetch, check ok, parse JSON, update the page.
