Request and response handling in Astro - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to access the request method in an Astro endpoint.

Astro

export async function GET({ request }) {
  const method = request.[1];
  return new Response(`Method is ${method}`);
}

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

Amethod

Burl

Cheaders

Dbody

Attempts:

3 left

💡 Hint

Common Mistakes

Using request.url instead of request.method

Trying to access request.body for method

Confusing headers with method

The request.method property gives the HTTP method (GET, POST, etc.) of the request.

2fill in blank

medium

Complete the code to read JSON data from a POST request in an Astro endpoint.

Astro

export async function POST({ request }) {
  const data = await request.[1]();
  return new Response(JSON.stringify(data));
}

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

Atext

Bjson

CformData

DarrayBuffer

Attempts:

3 left

💡 Hint

Common Mistakes

Using request.text() and then manually parsing JSON

Using request.formData() for JSON data

Trying to access request.body directly

Use request.json() to parse the JSON body of a POST request.

3fill in blank

hard

Fix the error in the code to set a custom header in the response.

Astro

export async function GET() {
  return new Response('Hello', { headers: { [1]: 'application/json' } });
}

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

Acontent-type

BContentType

CcontentType

DContent-Type

Attempts:

3 left

💡 Hint

Common Mistakes

Using camelCase like contentType

Using lowercase like content-type

Using incorrect header names

HTTP headers are case-insensitive but usually written in standard format like Content-Type.

4fill in blank

hard

Fill both blanks to create a JSON response with status 201 and a custom header.

Astro

export async function POST() {
  return new Response(JSON.stringify({ success: true }), { status: [1], headers: { [2]: 'application/json' } });
}

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

A201

BContent-Type

C200

DAuthorization

Attempts:

3 left

💡 Hint

Common Mistakes

Using status 200 instead of 201

Using wrong header names like Authorization

Omitting the Content-Type header

Status 201 means resource created. Content-Type header tells the client the response is JSON.

5fill in blank

hard

Fill all three blanks to extract a query parameter and return it in the response.

Astro

export async function GET({ request }) {
  const url = new URL(request.[1]);
  const name = url.searchParams.get('[2]');
  return new Response(`Hello, $[3]!`);
}

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

Aurl

Bname

Dmethod

Attempts:

3 left

💡 Hint

Common Mistakes

Using request.method instead of request.url

Using wrong query parameter key

Not using the variable in the response string

Use request.url to get the full URL, then get the query parameter name, and use it in the response.

Practice

1. In Astro, which exported function name is used to handle HTTP GET requests in an API route?

easy

A. POST

B. GET

C. FETCH

D. HANDLE

Solution

1. Step 1: Understand HTTP methods in Astro

   Astro uses exported functions named after HTTP methods to handle requests.

2. Step 2: Identify the function for GET requests

   The function named GET handles HTTP GET requests specifically.

3. Final Answer:

   GET -> Option B

4. Quick Check:

   GET function handles GET requests [OK]

Hint: GET function handles GET requests in Astro API routes [OK]

Common Mistakes:

• Confusing GET with POST function
• Using FETCH instead of GET
• Trying to use HANDLE which is not a valid function

2. Which of the following is the correct way to export a POST request handler in an Astro API route?

easy

A. export async function POST({ request }) { return new Response('ok'); }

B. export function handlePOST() { return 'ok'; }

C. export const POST = () => 'ok';

D. export function post() { return new Response('ok'); }

Solution

1. Step 1: Check function naming and export syntax

   Astro requires exported functions named exactly as HTTP methods in uppercase, e.g., POST.

2. Step 2: Validate function signature and return type

   The function should be async and return a Response object or similar.

3. Final Answer:

   export async function POST({ request }) { return new Response('ok'); } -> Option A

4. Quick Check:

   Correct export and async POST function [OK]

Hint: Use uppercase method name and async function for POST [OK]

Common Mistakes:

• Using lowercase function name 'post'
• Returning string directly instead of Response
• Wrong function name like 'handlePOST'

3. What will be the response body when this Astro API GET handler is called?

export async function GET() {
  return new Response(JSON.stringify({ message: 'Hello' }), {
    headers: { 'Content-Type': 'application/json' }
  });
}

medium

A. {"message":"Hello"}

B. Hello

C. [object Object]

D. SyntaxError

Solution

1. Step 1: Analyze the returned Response object

   The handler returns a Response with JSON stringified object and content-type header set to application/json.

2. Step 2: Determine the response body content

   The body will be the JSON string: '{"message":"Hello"}'.

3. Final Answer:

   {"message":"Hello"} -> Option A

4. Quick Check:

   JSON string response body = {"message":"Hello"} [OK]

Hint: JSON.stringify creates JSON string in response body [OK]

Common Mistakes:

• Expecting plain text 'Hello' instead of JSON string
• Confusing object with string output
• Missing Content-Type header causing wrong parsing

4. Identify the error in this Astro POST handler code:

export async function POST(request) {
  const data = await request.json();
  return new Response('Received');
}

medium

A. POST function cannot be async

B. Missing await before request.json()

C. Response body must be JSON, not plain text

D. The parameter should be an object with a request property

Solution

1. Step 1: Check function parameter structure

   Astro passes an object with a request property, not the request directly.

2. Step 2: Confirm correct parameter destructuring

   The function should be declared as POST({ request }) to access the request object.

3. Final Answer:

   The parameter should be an object with a request property -> Option D

4. Quick Check:

   Function parameter must destructure { request } [OK]

Hint: Use ({ request }) parameter to access request in handlers [OK]

Common Mistakes:

• Using request directly instead of destructuring
• Forgetting async keyword
• Returning plain text is allowed, not an error

5. You want to create an Astro API route that accepts a POST request with JSON data containing a "name" field, and responds with a JSON greeting message. Which code correctly implements this behavior?

hard

A. export async function POST({ request }) {
const data = await request.text();
return new Response(JSON.stringify({ greeting: data }), {
headers: { 'Content-Type': 'application/json' }
});
}

B. export function POST(request) {
const data = request.json();
return new Response(`Hello, ${data.name}!`);
}

C. export async function POST({ request }) {
const { name } = await request.json();
return new Response(JSON.stringify({ greeting: `Hello, ${name}!` }), {
headers: { 'Content-Type': 'application/json' }
});
}

D. export async function POST() {
return new Response(JSON.stringify({ greeting: 'Hello!' }), {
headers: { 'Content-Type': 'application/json' }
});
}

Solution

1. Step 1: Correctly destructure request parameter

   The function must accept an object and destructure request to access the request data.

2. Step 2: Parse JSON body and create JSON response

   Use await request.json() to get the JSON data, then respond with a JSON string including the greeting.

3. Step 3: Set proper Content-Type header

   Response must have header 'Content-Type': 'application/json' for JSON response.

4. Final Answer:

   export async function POST({ request }) { const { name } = await request.json(); return new Response(JSON.stringify({ greeting: `Hello, ${name}!` }), { headers: { 'Content-Type': 'application/json' } }); } -> Option C

5. Quick Check:

   Destructure request, await json(), respond with JSON [OK]

Hint: Destructure request, await json(), respond with JSON and header [OK]

Common Mistakes:

• Not destructuring request parameter
• Using request.text() instead of request.json()
• Missing Content-Type header for JSON response