Request and response handling in Astro - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output of this Astro component handling a GET request?

Consider this Astro component that handles a GET request and returns a JSON response.

---
export async function get({ request }) {
  return new Response(JSON.stringify({ message: 'Hello, Astro!' }), {
    status: 200,
    headers: { 'Content-Type': 'application/json' }
  });
}
---

  
    
Check the response
  

What will the server respond with when this component is requested?

Astro

---
export async function get({ request }) {
  return new Response(JSON.stringify({ message: 'Hello, Astro!' }), {
    status: 200,
    headers: { 'Content-Type': 'application/json' }
  });
}
---
<html>
  <body>
    <h1>Check the response</h1>
  </body>
</html>

A The server responds with a JSON body: {"message":"Hello, Astro!"} and status 200

B The server responds with HTML containing <h1>Check the response</h1> and status 200

C The server responds with a plain text 'Hello, Astro!' and status 200

D The server responds with a 404 Not Found error

💡 Hint

Remember that returning a Response object in the get function overrides the default HTML response.

When the get function returns a Response object, Astro sends that response directly. Here, it sends a JSON string with status 200 and the correct content type.

❓ state_output

intermediate

What is the value of the 'status' property after this POST handler runs?

Given this Astro POST handler:

---
export async function post({ request }) {
  const data = await request.json();
  if (data.name) {
    return new Response('Created', { status: 201 });
  } else {
    return new Response('Bad Request', { status: 400 });
  }
}
---

If the POST request body is {"name": "Astro"}, what is the response status?

Astro

---
export async function post({ request }) {
  const data = await request.json();
  if (data.name) {
    return new Response('Created', { status: 201 });
  } else {
    return new Response('Bad Request', { status: 400 });
  }
}
---

A 200

B 201

C 400

D 500

💡 Hint

Check the condition that tests if data.name exists.

The handler returns status 201 when data.name is truthy, which it is in this case.

📝 Syntax

advanced

Which option causes a syntax error in an Astro request handler?

Identify the option that will cause a syntax error when defining a GET handler in Astro.

A export async function get({ request ) { return new Response('OK'); }

B export async function get() { return new Response('OK'); }

C export async function get({ request }) { return new Response('OK'); }

D } ;)'KO'(esnopseR wen nruter { )} tseuqer {(teg noitcnuf cnysa tropxe

💡 Hint

Look carefully at the parentheses and braces in the function parameter list.

Option A has a mismatched parenthesis and brace in the parameter list, causing a syntax error.

🔧 Debug

advanced

Why does this Astro POST handler always return 400?

Review this Astro POST handler:

---
export async function post({ request }) {
  const data = await request.json();
  if (data.name === undefined) {
    return new Response('Created', { status: 201 });
  } else {
    return new Response('Bad Request', { status: 400 });
  }
}
---

Why does it always return status 400 even when sending {"name": "Astro"}?

Astro

---
export async function post({ request }) {
  const data = await request.json();
  if (data.name === undefined) {
    return new Response('Created', { status: 201 });
  } else {
    return new Response('Bad Request', { status: 400 });
  }
}
---

A Because the function is missing the async keyword

B Because the Response constructor requires a JSON string, not plain text

C Because the condition is reversed; it should check if name is defined, not undefined

D Because request.json() always returns undefined

💡 Hint

Check the logic in the if condition.

The condition incorrectly treats undefined as success. It should check if data.name is defined to return 201.

🧠 Conceptual

expert

Which statement about Astro request handlers is true?

Choose the correct statement about how Astro handles request and response in server-side components.

A Request handlers in Astro cannot access the request headers

B Astro request handlers must always return an object with a 'body' property containing HTML

C Astro automatically converts any returned string from a request handler into JSON with status 200

D Returning a Response object from a request handler bypasses the default HTML rendering and sends that response directly

💡 Hint

Think about what happens when you return a Response object in Astro.

Returning a Response object sends that response directly, skipping the default page rendering. Other options are incorrect because Astro does not require a 'body' object, does not auto-convert strings to JSON, and request headers are accessible.

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