Request and response handling in Astro

Introduction

Request and response handling lets your website talk with users and servers. It helps you get data from users and send back the right pages or information.

When you want to get information from a user's form on your website.

When your site needs to fetch data from an API or server.

When you want to send back a custom message or page based on user input.

When you want to handle errors or redirects after a user action.

When you want to control what your server sends back for each user request.

Syntax

Astro

export async function GET(context) {
  const { request, params } = context;
  // handle GET request
  return new Response('Hello from GET');
}

export async function POST(context) {
  const { request } = context;
  const data = await request.json();
  // handle POST request
  return new Response(JSON.stringify({ message: 'Data received' }), { headers: { 'Content-Type': 'application/json' } });
}

Astro uses special exported functions like GET and POST to handle requests.

The context object gives you access to the request and parameters.

Examples

This handles a simple GET request and returns plain text.

Astro

export async function GET() {
  return new Response('Hello World');
}

This handles a POST request, reads JSON data sent by the user, and sends it back in the response.

Astro

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

This example shows how to use URL parameters in the request to customize the response.

Astro

export async function GET({ params }) {
  return new Response(`You asked for item ${params.id}`);
}

Sample Program

This component handles GET requests by greeting the user with a name from the URL query. It handles POST requests by reading a JSON message and replying with it.

Astro

export async function GET({ request }) {
  const url = new URL(request.url);
  const name = url.searchParams.get('name') || 'Guest';
  return new Response(`Hello, ${name}! Welcome to Astro.`);
}

export async function POST({ request }) {
  const data = await request.json();
  const message = data.message || 'No message sent';
  return new Response(JSON.stringify({ reply: `You said: ${message}` }), {
    headers: { 'Content-Type': 'application/json' }
  });
}

Important Notes

Always set the correct Content-Type header in your responses to help browsers understand the data.

Use request.json() to read JSON data sent by the client in POST requests.

URL parameters and query strings help customize responses based on user input.

Summary

Request and response handling lets your Astro site talk with users and servers.

Use exported functions like GET and POST to handle different request types.

Access request data and send back responses with text or JSON as needed.

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