Fetching data and handling every state

The Fetch API is the browser's built in way to call a server. fetch(url) returns a promise for a response, and await res.json() reads the body as data. One detail catches everyone.

fetch only rejects when the network fails, so a 404 or 500 still resolves, and you must check res.ok yourself. Sending data means setting a method, a Content-Type header and a body made with JSON.stringify. A real UI has four states for every request: loading, success, empty and error, and each needs something on screen.

Use AbortController to cancel a request when the user types again or leaves the page. Otherwise an old, slow response can overwrite a newer one. By default, fetch sends your cookies only to your own site.

Calls to another domain are subject to CORS, a browser rule that the server, not your code, has to relax.