The Fetch API & HTTP

1
fetch("https://api.example.com/users/1")
2
  .then((response) => {
3
    if (!response.ok) {
4
      throw new Error(`HTTP error! status: ${response.status}`);
5
    }
6
    return response.json();
7
  })
8
  .then((data) => {
9
    console.log(data); // parsed JSON object
10
  })
11
  .catch((error) => {
12
    console.error("Fetch failed:", error);
13
  });

1
async function getUser(id) {
2
  try {
3
    const response = await fetch(`https://api.example.com/users/${id}`);
4

5
    if (!response.ok) {
6
      throw new Error(`HTTP error! status: ${response.status}`);
7
    }
8

9
    return await response.json();
10
  } catch (error) {
11
    console.error("Failed to fetch user:", error);
12
    throw error;
13
  }
14
}
15

16
const user = await getUser(1);
17
console.log(user.name);

1
// Text response
2
const html = await fetch("/page.html").then((r) => r.text());
3

4
// Binary image
5
const blob = await fetch("/image.png").then((r) => r.blob());
6
const imgUrl = URL.createObjectURL(blob);
7

8
// Check content type and choose method
9
const response = await fetch(url);
10
if (response.headers.get("content-type")?.includes("application/json")) {
11
  return response.json();
12
} else {
13
  return response.text();
14
}

1
fetch("https://api.example.com/users", {
2
  method: "POST",
3
  headers: {
4
    "Content-Type": "application/json",
5
    "Authorization": "Bearer eyJhbGciOiJIUzI1NiIs...",
6
    "X-Request-ID": "abc-123",
7
  },
8
  body: JSON.stringify({ name: "Alice", email: "alice@example.com" }),
9
});

1
const response = await fetch("https://api.example.com/data");
2

3
console.log(response.headers.get("content-type"));   // "application/json"
4
console.log(response.headers.get("x-request-id"));    // custom header
5
console.log(response.headers.get("set-cookie"));      // cookies
6

7
// Iterate all headers
8
for (const [key, value] of response.headers) {
9
  console.log(`${key}: ${value}`);
10
}

1
async function createUser(userData) {
2
  const response = await fetch("https://api.example.com/users", {
3
    method: "POST",
4
    headers: { "Content-Type": "application/json" },
5
    body: JSON.stringify(userData),
6
  });
7

8
  if (!response.ok) {
9
    const error = await response.json().catch(() => ({}));
10
    throw new Error(error.message || `Failed to create user (${response.status})`);
11
  }
12

13
  return response.json();
14
}

1
async function updateUser(id, userData) {
2
  const response = await fetch(`https://api.example.com/users/${id}`, {
3
    method: "PUT",
4
    headers: { "Content-Type": "application/json" },
5
    body: JSON.stringify(userData),
6
  });
7

8
  if (!response.ok) {
9
    throw new Error(`Update failed: ${response.status}`);
10
  }
11

12
  return response.json();
13
}

1
async function patchUser(id, partialData) {
2
  const response = await fetch(`https://api.example.com/users/${id}`, {
3
    method: "PATCH",
4
    headers: { "Content-Type": "application/json" },
5
    body: JSON.stringify(partialData),
6
  });
7
  return response.json();
8
}

1
async function deleteUser(id) {
2
  const response = await fetch(`https://api.example.com/users/${id}`, {
3
    method: "DELETE",
4
  });
5

6
  if (!response.ok) {
7
    throw new Error(`Delete failed: ${response.status}`);
8
  }
9

10
  // DELETE often returns 204 No Content (no body)
11
  return response.status === 204 ? null : response.json();
12
}

1
class ApiClient {
2
  constructor(baseURL) {
3
    this.baseURL = baseURL;
4
  }
5

6
  async request(endpoint, options = {}) {
7
    const url = `${this.baseURL}${endpoint}`;
8

9
    const config = {
10
      headers: {
11
        "Content-Type": "application/json",
12
        ...options.headers,
13
      },
14
      ...options,
15
    };
16

17
    try {
18
      const response = await fetch(url, config);
19
      const data = response.status === 204 ? null : await response.json();
20

21
      if (!response.ok) {
22
        const error = new Error(data?.message || `HTTP ${response.status}`);
23
        error.status = response.status;
24
        error.data = data;
25
        throw error;
26
      }
27

28
      return data;
29
    } catch (error) {
30
      if (error.name === "TypeError" && error.message === "Failed to fetch") {
31
        throw new Error("Network error — check your connection");
32
      }
33
      throw error;
34
    }
35
  }
36

37
  get(endpoint, options) {
38
    return this.request(endpoint, { ...options, method: "GET" });
39
  }
40

41
  post(endpoint, body, options) {
42
    return this.request(endpoint, {
43
      ...options,
44
      method: "POST",
45
      body: JSON.stringify(body),
46
    });
47
  }
48

49
  put(endpoint, body, options) {
50
    return this.request(endpoint, {
51
      ...options,
52
      method: "PUT",
53
      body: JSON.stringify(body),
54
    });
55
  }
56

57
  delete(endpoint, options) {
58
    return this.request(endpoint, { ...options, method: "DELETE" });
59
  }
60
}
61

62
const api = new ApiClient("https://api.example.com");
63

64
// Usage:
65
const user = await api.get("/users/1");
66
const newUser = await api.post("/users", { name: "Alice" });

1
async function handleResponse(response) {
2
  switch (response.status) {
3
    case 200:
4
    case 201:
5
      return response.json();
6

7
    case 204:
8
      return null;
9

10
    case 400:
11
      throw { code: "VALIDATION_ERROR", detail: await response.json() };
12

13
    case 401:
14
      throw { code: "UNAUTHORIZED", message: "Please log in again" };
15

16
    case 403:
17
      throw { code: "FORBIDDEN", message: "You don't have permission" };
18

19
    case 404:
20
      throw { code: "NOT_FOUND", message: "Resource not found" };
21

22
    case 429:
23
      throw { code: "RATE_LIMITED", message: "Too many requests" };
24

25
    case 500:
26
    case 502:
27
    case 503:
28
      throw { code: "SERVER_ERROR", message: "Server is unavailable" };
29

30
    default:
31
      throw { code: "UNKNOWN", message: `Unexpected status ${response.status}` };
32
  }
33
}

1
const response = await fetch(url, {
2
  method: "GET",                     // HTTP method
3
  headers: {                         // Request headers
4
    "Content-Type": "application/json",
5
    "Authorization": "Bearer token",
6
  },
7
  body: JSON.stringify(data),        // Request body (POST/PUT/PATCH)
8
  mode: "cors",                      // cors, no-cors, same-origin
9
  credentials: "include",            // omit, same-origin, include
10
  cache: "no-cache",                 // default, no-cache, reload, force-cache
11
  redirect: "follow",                // follow, error, manual
12
  referrerPolicy: "no-referrer",     // referrer policy
13
  signal: AbortSignal.timeout(5000), // timeout (ES2022+)
14
});

1
function searchUsers(query) {
2
  const controller = new AbortController();
3

4
  // Cancel previous request if new one comes in
5
  if (searchUsers.currentController) {
6
    searchUsers.currentController.abort();
7
  }
8
  searchUsers.currentController = controller;
9

10
  return fetch(`/api/users?q=${query}`, {
11
    signal: controller.signal,
12
  }).then((r) => r.json());
13
}
14

15
// Manual cancellation
16
const controller = new AbortController();
17
setTimeout(() => controller.abort(), 5000); // timeout
18

19
try {
20
  const data = await fetch("/api/slow-endpoint", {
21
    signal: controller.signal,
22
  });
23
} catch (err) {
24
  if (err.name === "AbortError") {
25
    console.log("Request was cancelled");
26
  }
27
}

1
// Built-in timeout — equivalent to AbortController with setTimeout
2
const response = await fetch(url, {
3
  signal: AbortSignal.timeout(10000), // 10 second timeout
4
});

1
fetch("/api/users", {
2
  method: "POST",
3
  headers: { "Content-Type": "application/json" },
4
  body: JSON.stringify({ name: "Alice", email: "alice@example.com" }),
5
});

1
fetch("/api/login", {
2
  method: "POST",
3
  headers: { "Content-Type": "application/x-www-form-urlencoded" },
4
  body: new URLSearchParams({
5
    username: "alice",
6
    password: "secret123",
7
  }),
8
});

1
const formData = new FormData();
2
formData.append("name", "Avatar");
3
formData.append("file", fileInput.files[0]); // File object
4

5
fetch("/api/upload", {
6
  method: "POST",
7
  // Do NOT set Content-Type — browser will set it with boundary
8
  body: formData,
9
});

1
async function fetchWithLoading(url) {
2
  // Show loading state
3
  showSpinner();
4

5
  try {
6
    const data = await fetch(url).then((r) => r.json());
7
    return data;
8
  } catch (error) {
9
    showError(error.message);
10
    throw error;
11
  } finally {
12
    hideSpinner();
13
  }
14
}

1
async function fetchLatest(query) {
2
  const requestId = Date.now();
3
  fetchLatest.lastId = requestId;
4

5
  const results = await searchApi(query);
6

7
  // Only update UI if this is still the latest request
8
  if (fetchLatest.lastId === requestId) {
9
    renderResults(results);
10
  }
11
}