JavaScript · Lesson 49
JavaScript Fetch API
Get real live data from the internet — no page reload needed. This is how every modern web app works.
Before Fetch API, getting data from a server meant reloading the entire page. It was slow and painful. Then came Fetch API — and suddenly you could get data in the background, update just part of the page, and build apps that feel instant. Every modern website uses it — Twitter, Instagram, YouTube — all of them.
What is the Fetch API?
Fetch API is a built-in JavaScript function that lets you make HTTP requests — GET, POST, PUT, DELETE — directly from the browser without reloading the page.
It returns a Promise — so you use async/await or .then() to handle the response.
HTTP Methods Quick Reference
| Method |
What It Does |
Example |
| GET |
Get data from server |
Load user profile |
| POST |
Send data to server |
Submit a form |
| PUT |
Update existing data |
Edit profile info |
| DELETE |
Delete data |
Delete a post |
1. GET Request — Fetch Data
This is the most common use of Fetch — getting data from an API and showing it on the page.
// Simple GET request
async function getUsers() {
try {
const response = await fetch('https://jsonplaceholder.typicode.com/users');
const data = await response.json();
console.log(data); // array of users
} catch (error) {
console.log('Error:', error.message);
}
}
getUsers();
2. POST Request — Send Data
Use POST when you want to send data to a server — like submitting a form or creating a new item.
// POST request — send data
async function createPost() {
const response = await fetch('https://jsonplaceholder.typicode.com/posts', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
title: 'My New Post',
body: 'Post content here',
userId: 1
})
});
const data = await response.json();
console.log('Created:', data);
}
createPost();
Pro Tips
Pro Tip #1 — Always check response.ok
Fetch does NOT throw an error for 404 or 500 responses — it only fails on network errors. Always check response.ok or response.status to make sure the request actually succeeded.
Pro Tip #2 — Always use async/await
Use async/await instead of .then().catch() — it is cleaner, easier to read, and much easier to debug. Every professional developer uses async/await for Fetch.
Pro Tip #3 — Always wrap in try/catch
Always wrap your Fetch calls in try/catch — network requests can fail anytime. A user might lose internet connection mid-request. Never leave a Fetch call without error handling.
Quick Reference Cheatsheet
// GET
const res = await fetch(url);
const data = await res.json();
// POST
const res = await fetch(url, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(data)
});
// Check if success
if (!res.ok) throw new Error('Failed!');
// Full pattern
async function getData() {
try {
const res = await fetch(url);
if (!res.ok) throw new Error('Error!');
return await res.json();
} catch (e) {
console.log(e.message);
}
}
Want daily web dev tips?
Follow Muhammad Waheed Asghar for daily JavaScript and CSS tips!
.jpg.png)
