GET, POST, PUT, DELETE handlers in Svelte - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a GET handler in SvelteKit.

Svelte

export async function GET({ params }) {
  const data = await fetch('/api/data');
  const json = await data.[1]();
  return new Response(JSON.stringify(json));
}

Drag options to blanks, or click blank then click option'

Ablob

Btext

Cjson

DformData

Attempts:

3 left

💡 Hint

Common Mistakes

Using text() instead of json() causes the data to be a string, not an object.

Using blob() or formData() is for other data types, not JSON.

The json() method parses the response body as JSON, which is needed to handle JSON data in a GET request.

2fill in blank

medium

Complete the code to handle a POST request that reads JSON data from the request body.

Svelte

export async function POST({ request }) {
  const body = await request.[1]();
  // process body
  return new Response('Created', { status: 201 });
}

Drag options to blanks, or click blank then click option'

Atext

Bjson

CformData

Dblob

Attempts:

3 left

💡 Hint

Common Mistakes

Using text() returns a string, not parsed JSON.

Using formData() is for form submissions, not JSON.

The json() method reads the request body and parses it as JSON, which is needed to handle JSON POST data.

3fill in blank

hard

Fix the error in the PUT handler to correctly parse JSON from the request body.

Svelte

export async function PUT({ request }) {
  const data = await request.[1]();
  // update resource with data
  return new Response('Updated', { status: 200 });
}

Drag options to blanks, or click blank then click option'

Atext

Bblob

CformData

Djson

Attempts:

3 left

💡 Hint

Common Mistakes

Using text() causes the data to be a string, which is not directly usable.

Using formData() or blob() is incorrect for JSON data.

To update data sent as JSON, the json() method must be used to parse the request body.

4fill in blank

hard

Fill both blanks to create a DELETE handler that returns a 204 No Content response.

Svelte

export async function DELETE({ params }) {
  // delete resource identified by params.id
  return new Response(null, { status: [1] });
}

// The status code [2] means no content is returned.

Drag options to blanks, or click blank then click option'

A204

B404

C200

D500

Attempts:

3 left

💡 Hint

Common Mistakes

Using 200 returns OK but usually expects content.

Using 404 means resource not found, which is an error here.

Using 500 means server error, which is incorrect.

Status code 204 means the request was successful but there is no content to return, which is standard for DELETE responses.

5fill in blank

hard

Fill all three blanks to create a POST handler that reads JSON, processes it, and returns a JSON response with status 201.

Svelte

export async function POST({ request }) {
  const data = await request.[1]();
  const result = { message: 'Received', received: data };
  return new Response(JSON.stringify(result), {
    status: [2],
    headers: { 'Content-Type': [3] }
  });
}

Drag options to blanks, or click blank then click option'

Atext

B201

C'application/json'

Djson

Attempts:

3 left

💡 Hint

Common Mistakes

Using text() instead of json() causes parsing errors.

Using status 200 instead of 201 is less precise for creation.

Forgetting to set Content-Type header causes client confusion.

The request body is parsed as JSON using json(). The response status 201 means created. The content type header must be 'application/json' to indicate JSON response.