Fetch API - Exercise 2

Question 1: How do you send JSON with a POST request?

Set the method and content type, then serialize the object with JSON.stringify(). Handle both network failures and unsuccessful HTTP status codes before using the response data.

javascript

const response = await fetch('/api/posts', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ title: 'Hello' })
});

Question 2: How do you create a reusable safeFetch helper?

Centralize the response.ok check, then return the parsed JSON. Handle both network failures and unsuccessful HTTP status codes before using the response data. The example shows where that result becomes available to the rest of the program.

javascript

async function safeFetch(url, options) {
  const response = await fetch(url, options);
  if (!response.ok) throw new Error(`HTTP ${response.status}`);
  return response.json();
}

Question 3: How do you update a resource with PUT?

Use PUT with a JSON body and the appropriate request header. Handle both network failures and unsuccessful HTTP status codes before using the response data.

javascript

await fetch('/api/users/7', {
  method: 'PUT',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ name: 'Ada' })
});

Question 4: How do you delete a resource?

Send a DELETE request to the resource URL and check the response. Handle both network failures and unsuccessful HTTP status codes before using the response data.

javascript

const response = await fetch('/api/users/7', {
  method: 'DELETE'
});
if (!response.ok) throw new Error('Delete failed');

Question 5: How do you run independent requests in parallel?

Pass the fetch Promises to Promise.all() so they start without waiting for one another. Handle both network failures and unsuccessful HTTP status codes before using the response data.

javascript

const [usersResponse, postsResponse] = await Promise.all([
  fetch('/api/users'),
  fetch('/api/posts')
]);

Question 6: How do you send credentials with a cross-origin request?

Set credentials according to the server’s cookie and CORS policy. Handle both network failures and unsuccessful HTTP status codes before using the response data. The example shows where that result becomes available to the rest of the program.

javascript

const response = await fetch('https://api.example.com/me', {
  credentials: 'include'
});

Question 7: How do you add an authorization header?

Include the token in the request headers, usually with the server’s expected scheme. Handle both network failures and unsuccessful HTTP status codes before using the response data.

javascript

const response = await fetch('/api/profile', {
  headers: { Authorization: `Bearer ${token}` }
});

Question 8: How do you transform fetched data before rendering it?

Parse the response, transform the collection, then pass the view model to the renderer. Handle both network failures and unsuccessful HTTP status codes before using the response data.

javascript

const users = await safeFetch('/api/users');
const names = users.map(user => user.name).sort();
renderNames(names);

Question 9: How do you send JSON in a POST request?

Set the method, JSON content type, and serialized request body before checking the response.

javascript

await fetch('/api/users', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ name: 'Ada' })
});

Question 10: How do you include credentials in a request?

Use the credentials option when cookies or other browser-managed credentials must be sent.

javascript

const response = await fetch('/api/profile', {
  credentials: 'include'
});