Request and response handling in Astro - Mini Project: Build & Apply

Request and response handling

📖 Scenario: You are building a simple Astro server route that receives a request with a query parameter and sends back a JSON response.

🎯 Goal: Create an Astro API route that reads a query parameter called name from the request URL and returns a JSON response greeting that name.

📋 What You'll Learn

Create a GET request handler function called get

Extract the name query parameter from the request URL

Set a default value for name if it is missing

Return a JSON response with a greeting message using the name value

💡 Why This Matters

🌍 Real World

Handling requests and sending JSON responses is essential for building APIs and dynamic web applications.

💼 Career

Understanding request and response handling in Astro helps you build backend logic for modern web projects and server-side rendering.

1

Create the GET request handler function

Write a function called get that takes a single parameter context.

Astro

# Your code here

Hint

Astro API routes use exported functions named after HTTP methods like get to handle requests.

2

Extract the name query parameter

Inside the get function, create a variable called name that extracts the name query parameter from context.url.searchParams. If name is missing, set it to the string Guest.

Astro

export async function get(context) {
  // Extract the 'name' query parameter or default to 'Guest'
  // Your code here
}

Hint

Use context.url.searchParams.get('name') to get the query parameter. Use the nullish coalescing operator ?? to set a default.

3

Create the JSON response object

Inside the get function, create a variable called responseBody that is an object with a single property message. The value should be a string greeting using the name variable, like `Hello, ${name}!`.

Astro

export async function get(context) {
  const name = context.url.searchParams.get('name') ?? 'Guest';
  // Create the response body object
  // Your code here
}

Hint

Create an object with a message property using a template string to include the name.

4

Return the JSON response

Return an object from the get function with body set to the JSON string of responseBody and headers set to { 'Content-Type': 'application/json' }.

Astro

export async function get(context) {
  const name = context.url.searchParams.get('name') ?? 'Guest';
  const responseBody = { message: `Hello, ${name}!` };
  // Return the JSON response
  // Your code here
}

Hint

Use JSON.stringify to convert the object to a JSON string and set the correct content type header.

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