fetch and APIs

What is an API?

API means Application Programming Interface: a fixed set of requests one program can make to another. On the web, an API is often a URL (an endpoint) that sends back data instead of a page. Most APIs answer in JSON, the text format for objects and arrays you met with localStorage.

{
  "from": "NDLS",
  "to": "BCT",
  "trains": [
    { "number": "12952", "name": "Rajdhani Express", "departs": "16:55" },
    { "number": "12954", "name": "August Kranti Rajdhani", "departs": "17:15" }
  ]
}

GET data with fetch

fetch('/api/trains?from=NDLS&to=BCT')
  .then((response) => {
    if (!response.ok) throw new Error(`HTTP ${response.status}`);
    return response.json(); // reads the body and parses JSON (also a promise)
  })
  .then((data) => console.log(data.trains.length, 'trains'))
  .catch((error) => console.error('Could not load trains:', error.message));

Query strings with URLSearchParams

A query string is the part after ? in a URL, like ?q=rice&page=2. Do not glue it together by hand: spaces, & and other symbols must be encoded. URLSearchParams does this for you.

const params = new URLSearchParams({ q: 'basmati rice', page: 2 });
console.log(params.toString()); // q=basmati+rice&page=2
const url = `/api/products?${params}`;

// Reading the query string of the current page:
const current = new URLSearchParams(location.search);
console.log(current.get('q'));

Sending data with POST

const response = await fetch('/api/orders', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ itemId: 'p7', qty: 2, pincode: '560001' }),
});
if (!response.ok) throw new Error(`HTTP ${response.status}`);
const order = await response.json(); // e.g. { id: 991, status: 'placed' }

CORS in simple words

An origin is the protocol + domain + port of a page, like https://myshop.in. By default, the browser does not let your page read responses from a different origin. The other server must say "this origin is allowed" with a header called Access-Control-Allow-Origin. This rule is CORS (Cross-Origin Resource Sharing). A CORS error in the Console is fixed on the server (or by calling through your own server), not in your fetch code.

Loading, empty and error states

• Loading: show a spinner or skeleton, and disable the button.
• Success with data: draw the list.
• Empty: a friendly message such as "No trains found for this date".
• Error: a clear message and a "Try again" button. Do not leave a blank page.