JavaScript Fetch API Advanced

JavaScript Fetch API Advanced

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

Basic Fetch

Fetch with Async/Await

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

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)

DELETE Request

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();

Fetch with Headers and Authentication

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();

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