Fetch API — Complete Guide
Fetch API — Complete Guide: free step-by-step lesson with examples, common mistakes, and interview tips — part of JavaScript Tutorial on Toolliyo Academy.
On this page
JavaScript Tutorial · Lesson 45 of 100
Fetch API
Basics ✓ → Objects & data ✓ → Async & DOM → Advanced → Tools → Projects
Intermediate · 3 — Async & DOM · ~6 min · JS Async JavaScript
What is this?
fetch(url) loads data from a server over HTTP. It returns a Promise you resolve with .json() or .text().
Why should you care?
Modern replacement for XMLHttpRequest — used in every SPA and mobile web app.
See it live — copy this example
Paste into an HTML file or the browser console (F12). Use Run below when the live editor is available.
fetch("https://jsonplaceholder.typicode.com/todos/1")
.then((res) => res.json())
.then((data) => console.log(data.title))
.catch((err) => console.error(err));Run Example »
Edit the code below and click Run to see the result in Toolliyo’s live editor.
What happened?
- First then checks response; second parses JSON.
- catch handles network errors.
Practice next
- Fetch JSONPlaceholder todo and log title.
- Add res.ok check with throw on failure.
- Rewrite with async/await.
- Add headers: { Accept: "application/json" } to the request.
- Abort a slow fetch with AbortController after 2 seconds.
Remember
fetch returns a Promise Check res.ok Use .json() for APIs
ScriptVerse live balances
Banking dashboard fetch("/api/accounts") refreshes balances every 30 seconds on a timer.
Outcome: fetch is the standard way modern ScriptVerse apps load JSON from REST APIs.
Interview prep for this lesson
Practice these questions aloud after reading—each links to a full structured answer.
Sign in to ask a question or upvote helpful answers.
No questions yet — be the first to ask!
