JavaScript Fetch API Advanced

The Fetch API is a modern way to make HTTP requests in JavaScript.
It works with Promises and is commonly used to interact with APIs.

1️⃣ Basic Fetch

fetch("https://jsonplaceholder.typicode.com/posts")
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error("Error:", error));


.then() handles the resolved Promise

.catch() handles errors

fetch("https://jsonplaceholder.typicode.com/posts")

.then(response => response.json())

.then(data => console.log(data))

.catch(error => console.error("Error:", error));

.then() handles the resolved Promise

.catch() handles errors

2️⃣ Fetch with Async/Await

Cleaner and easier to read than .then() chains.

3️⃣ Fetch with HTTP Methods

GET Request (default)

POST Request

async function addPost() {
let post = {
title: "My Post",
body: "This is a post",
userId: 1
};let response = await fetch("https://jsonplaceholder.typicode.com/posts", {
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify(post)
});

let data = await response.json();
console.log(data);
}

addPost();

async function addPost() {

let post = {

title: "My Post",

body: "This is a post",

userId: 1

};let response = await fetch("https://jsonplaceholder.typicode.com/posts", {

method: "POST",

headers: {

"Content-Type": "application/json"

body: JSON.stringify(post)

});

let data = await response.json();

console.log(data);

}

addPost();

PUT Request (Update Data)

fetch("https://jsonplaceholder.typicode.com/posts/1", {
method: "PUT",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ title: "Updated Title" })
})
.then(res => res.json())
.then(data => console.log(data));

fetch("https://jsonplaceholder.typicode.com/posts/1", {

method: "PUT",

headers: { "Content-Type": "application/json" },

body: JSON.stringify({ title: "Updated Title" })

})

.then(res => res.json())

.then(data => console.log(data));

DELETE Request

4️⃣ Handling Fetch Errors

Fetch only rejects on network failure.
HTTP errors (404, 500) are considered resolved Promises. Check response.ok.

async function fetchWithError() {
try {
let res = await fetch("https://jsonplaceholder.typicode.com/invalid");
if (!res.ok) throw new Error(`HTTP error! Status: ${res.status}`);
let data = await res.json();
console.log(data);
} catch (err) {
console.error("Error:", err.message);
}
}fetchWithError();

async function fetchWithError() {

try {

let res = await fetch("https://jsonplaceholder.typicode.com/invalid");

if (!res.ok) throw new Error(`HTTP error! Status: ${res.status}`);

let data = await res.json();

console.log(data);

} catch (err) {

console.error("Error:", err.message);

}

}fetchWithError();

5️⃣ Fetch with Headers and Authentication

6️⃣ Parallel Fetch Requests

async function fetchMultiple() {
let urls = [
"https://jsonplaceholder.typicode.com/users",
"https://jsonplaceholder.typicode.com/posts"
];let [users, posts] = await Promise.all(urls.map(url => fetch(url).then(res => res.json())));
console.log(users, posts);
}

fetchMultiple();

async function fetchMultiple() {

let urls = [

"https://jsonplaceholder.typicode.com/users",

"https://jsonplaceholder.typicode.com/posts"

];let [users, posts] = await Promise.all(urls.map(url => fetch(url).then(res => res.json())));

console.log(users, posts);

}

fetchMultiple();

7️⃣ Streaming Response (Advanced)

Useful for large data streams without loading all into memory.

⭐ Summary Table

Feature	Example / Note
Basic GET	`fetch(url).then(res => res.json())`
POST Data	`fetch(url, { method: "POST", body: JSON.stringify(data) })`
PUT / DELETE	Update or delete resources
Error Handling	Check `res.ok` or use `try/catch`
Async/Await	Cleaner code with `await fetch()`
Multiple Requests	`Promise.all([...])`
Headers & Auth	Add `headers` object
Stream Data	Use `res.body.getReader()`

JavaScript Fetch API Advanced

JavaScript Fetch API Advanced

1️⃣ Basic Fetch

2️⃣ Fetch with Async/Await

3️⃣ Fetch with HTTP Methods

GET Request (default)

POST Request

PUT Request (Update Data)

DELETE Request

4️⃣ Handling Fetch Errors

5️⃣ Fetch with Headers and Authentication

6️⃣ Parallel Fetch Requests

7️⃣ Streaming Response (Advanced)

⭐ Summary Table

You may also like...

Leave a Reply Cancel reply

JavaScript Fetch API Advanced

JavaScript Fetch API Advanced

1️⃣ Basic Fetch

2️⃣ Fetch with Async/Await

3️⃣ Fetch with HTTP Methods

GET Request (default)

POST Request

PUT Request (Update Data)

DELETE Request

4️⃣ Handling Fetch Errors

5️⃣ Fetch with Headers and Authentication

6️⃣ Parallel Fetch Requests

7️⃣ Streaming Response (Advanced)

⭐ Summary Table

You may also like...

JavaScript Set Logic

JavaScript Sets

JavaScript Array Search

Leave a Reply Cancel reply