fetch vs XMLHttpRequest?

fetch is Promise-based and cleaner; XHR is legacy.

Browser blocks cross-origin without Access-Control-Allow-Origin header. Fix on server or proxy.

Use Promise.all for parallel requests; avoid await in tight sequential loops when parallel is OK.

JavaScript Fetch API Basics

Load public JSON placeholder.

Output

Click load

Fetches one post from JSONPlaceholder.

const res = await fetch(url);
if (!res.ok) throw new Error(res.status);
const data = await res.json();

Send Content-Type application/json.

Snippet

POST with JSON body\n{ "title": "Hi" }

Server must accept CORS for browser demos.

await fetch(url, {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ title: 'Hi' })
});

Cancel slow requests on route change.

Note

const c = new AbortController(); fetch(url, { signal: c.signal }); c.abort();

Prevents race updates.

const controller = new AbortController();
fetch(url, { signal: controller.signal });

fetch vs XMLHttpRequest?: fetch is Promise-based and cleaner; XHR is legacy.
CORS errors?: Browser blocks cross-origin without Access-Control-Allow-Origin header. Fix on server or proxy.
Await fetch in loop?: Use Promise.all for parallel requests; avoid await in tight sequential loops when parallel is OK.