Pathwise

Manuals / JavaScript / Chapter 8

C · Async · intermediate · Week 5 · Chapter 8 of 14

Fetch, HTTP & error UX

fetch(url) returns a Promise resolving to Response. Check response.ok — fetch does not reject on 404. Parse JSON with .json(). Build loading, success, and error UI states. Same patterns apply in Node with fetch (built-in since v18).

Path progress
51%

Step 1 of 5

GET request

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

GET requestDrag stickies · tap for tips
Study mapDrag stickies · tap for tipsKeep it shortdrag · tap →Name the waitdrag · tap →Scope locatorsdrag · tap →Trace when stuckdrag · tap →One browser firstdrag · tap →Isolate statedrag · tap →Assert the UIdrag · tap →Retry wiselydrag · tap →Seed datadrag · tap →Close the loopdrag · tap →Keep it shortdrag · tap →Name the waitdrag · tap →Scope locatorsdrag · tap →Trace when stuckdrag · tap →One browser firstdrag · tap →Isolate statedrag · tap →Pathwise hackdrag · tap →GET requestdrag · tap →Try thisdrag · tap →Follow the dashed drag · tap →

Example

async function getPost(id) {
  const res = await fetch(`https://jsonplaceholder.typicode.com/posts/${id}`)
  if (!res.ok) throw new Error(`HTTP ${res.status}`)
  return res.json()
}

Do this now

Fetch https://jsonplaceholder.typicode.com/posts/1 and log title.

Was this step clear?
Chapter learning outcomes
  • fetch API
  • HTTP status codes
  • Loading/error UI states
  • Headers & POST bodies
  • AbortController

Clear these before you leave

Side quest

Post browser

Small app: fetch posts list, click to view detail, search with debounced fetch, full loading/error states.