Request and response handling in Astro - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the role of the request object in Astro's request and response handling?

The request object contains details about the incoming HTTP request, such as method, headers, URL, and body. It helps the server understand what the client wants.

beginner

How do you send a JSON response in Astro?

You create a new Response object with JSON data as the body and set the 'Content-Type' header to 'application/json'. For example:
return new Response(JSON.stringify(data), { headers: { 'Content-Type': 'application/json' } });

intermediate

What method do you use to read the body of a POST request in Astro?

You use await request.json() to parse the JSON body asynchronously or await request.text() for plain text. This lets you access data sent by the client.

intermediate

Explain how to handle different HTTP methods in an Astro API route.

You check request.method and use conditional logic to respond accordingly. For example, handle GET requests differently from POST requests inside the same endpoint.

beginner

Why is setting proper response headers important in Astro's request and response handling?

Headers tell the client how to interpret the response, control caching, and manage security. For example, setting 'Content-Type' ensures the browser knows the data format.

In Astro, which property holds the HTTP method of the incoming request?

A request.action

B request.type

C request.method

D request.mode

The HTTP method (GET, POST, etc.) is accessed via request.method in Astro.

How do you return a JSON response in Astro?

A return new Response(JSON.stringify(data), { headers: { 'Content-Type': 'application/json' } })

B return JSON.parse(data)

C return Response.json(data)

D return data.toJSON()

You create a new Response with the JSON string and set the Content-Type header to application/json.

Which method reads JSON data from a POST request body in Astro?

A request.body()

B request.json()

C request.data()

D request.parse()

request.json() asynchronously parses the JSON body of the request.

What should you check to handle different HTTP methods in Astro?

A request.method

B request.headers

C request.url

D request.body

request.method tells you if the request is GET, POST, etc., so you can handle each accordingly.

Why set the 'Content-Type' header in a response?

A To encrypt the response

B To control the request method

C To change the URL

D To specify the data format sent to the client

The 'Content-Type' header tells the client how to interpret the response data.

Describe how you handle a POST request with JSON data in an Astro API route.

Think about reading the body and sending a JSON response.

Explain why response headers are important when sending data back to the client in Astro.

Consider what happens if headers are missing or wrong.

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