Request and Response objects in Deno - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a new HTTP server that listens on port 8000.

Deno

import { serve } from "https://deno.land/std/http/server.ts";

serve((req) => new Response("Hello World"), { port: [1] });

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

A3000

B8080

C8000

D5000

Attempts:

3 left

💡 Hint

Common Mistakes

Using a port number that is not specified in the code.

Confusing the port number with other numbers like 3000 or 8080.

The serve function starts an HTTP server on the specified port. Here, port 8000 is the standard example port.

2fill in blank

medium

Complete the code to read the HTTP method from the incoming request object.

Deno

serve((req) => {
  const method = req.[1];
  return new Response(`Method is ${method}`);
});

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

Aurl

Bmethod

Cheaders

Dbody

Attempts:

3 left

💡 Hint

Common Mistakes

Using url instead of method.

Trying to read the method from headers.

The method property of the request object tells us if the request is GET, POST, etc.

3fill in blank

hard

Fix the error in the code to correctly return a JSON response with status 200.

Deno

serve((req) => {
  return new Response(JSON.stringify({ message: "OK" }), {
    status: [1],
    headers: { "Content-Type": "application/json" }
  });
});

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

A404

B500

C301

D200

Attempts:

3 left

💡 Hint

Common Mistakes

Using 404 which means not found.

Using 500 which means server error.

Status code 200 means the request was successful and the response contains the expected data.

4fill in blank

hard

Fill both blanks to extract the JSON body from the request and respond with a message.

Deno

serve(async (req) => {
  const data = await req.[1]();
  return new Response(`Hello, ${data.[2]`);
});

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

Ajson

Btext

Cname

Dbody

Attempts:

3 left

💡 Hint

Common Mistakes

Using text() instead of json() to read JSON data.

Trying to access body directly without parsing.

The json() method reads the request body as JSON. Then we access the name property from the parsed data.

5fill in blank

hard

Fill all three blanks to create a response with a custom header and status code.

Deno

serve((req) => {
  return new Response("Custom header set", {
    status: [1],
    headers: { [2]: [3] }
  });
});

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

A404

B200

C"X-Custom-Header"

D"MyValue"

Attempts:

3 left

💡 Hint

Common Mistakes

Using status 404 which means not found.

Not quoting the header name or value correctly.

Status 200 means success. The header key is X-Custom-Header and the value is MyValue. This shows how to add custom headers to a response.

Practice

1. What does the Request object represent in a Deno web server?

easy

A. The data sent by the server to the user

B. The server's file system access

C. The server configuration settings

D. The data sent by the user to the server

Solution

1. Step 1: Understand the role of Request object

   The Request object contains information about what the user sends to the server, such as headers, method, and body.

2. Step 2: Differentiate from Response object

   The Response object is what the server sends back, so it is not the Request.

3. Final Answer:

   The data sent by the user to the server -> Option D

4. Quick Check:

   Request = user data [OK]

Hint: Request = user input; Response = server output [OK]

Common Mistakes:

• Confusing Request with Response
• Thinking Request holds server settings
• Assuming Request is server output

2. Which of the following is the correct way to create a Response object with a JSON body in Deno?

easy

A. Response.json(data)

B. new Response(data, { type: 'json' })

C. new Response(data, { headers: { 'Content-Type': 'application/json' } })

D. new Response(data, { contentType: 'application/json' })

Solution

1. Step 1: Check how to send JSON in Response

   In Deno, you can create a Response with JSON by stringifying the data and setting the 'Content-Type' header to 'application/json'.

2. Step 2: Validate options

   new Response(data, { headers: { 'Content-Type': 'application/json' } }) correctly sets the header and passes data (assuming data is stringified). Response.json(data) is invalid because Response.json() is not a standard method in Deno's Response API. Options B and D use incorrect properties.

3. Final Answer:

   new Response(data, { headers: { 'Content-Type': 'application/json' } }) -> Option C

4. Quick Check:

   Response with JSON header [OK]

Hint: Use new Response(JSON.stringify(data), { headers: { 'Content-Type': 'application/json' } }) [OK]

Common Mistakes:

• Passing raw object without stringify
• Using incorrect init properties like 'type' or 'contentType'
• Assuming Response.json() exists

3. Given the following Deno server code snippet, what will be the response body when a user sends a GET request?

const handler = (req) => {
  if (req.method === 'GET') {
    return new Response('Hello World');
  }
  return new Response('Method Not Allowed', { status: 405 });
};

medium

A. "Method Not Allowed"

B. "Hello World"

C. Empty response

D. Error thrown

Solution

1. Step 1: Check request method condition

   The code checks if the request method is 'GET'. If yes, it returns 'Hello World'.

2. Step 2: Determine response for GET request

   Since the user sends a GET request, the first condition matches and returns 'Hello World'.

3. Final Answer:

   "Hello World" -> Option B

4. Quick Check:

   GET request returns 'Hello World' [OK]

Hint: Check req.method to decide response content [OK]

Common Mistakes:

• Ignoring method check and picking wrong response
• Assuming default response is empty
• Thinking error is thrown on GET

4. Identify the error in this Deno request handler code:

const handler = (req) => {
  if (req.method = 'POST') {
    return new Response('Posted');
  }
  return new Response('Not Posted');
};

medium

A. Using assignment (=) instead of comparison (===) in if condition

B. Missing await keyword before Response

C. Response body must be JSON, not string

D. req.method is undefined

Solution

1. Step 1: Check the if condition syntax

   The code uses single equals (=) which assigns 'POST' to req.method instead of comparing it.

2. Step 2: Understand correct comparison operator

   To compare, use '===' or '==' instead of '=' to avoid bugs.

3. Final Answer:

   Using assignment (=) instead of comparison (===) in if condition -> Option A

4. Quick Check:

   Use '===' for comparison, not '=' [OK]

Hint: Use '===' for comparisons, '=' is assignment [OK]

Common Mistakes:

• Confusing assignment and comparison operators
• Thinking Response needs await here
• Assuming req.method is missing

5. How can you read JSON data sent in the body of a POST request using the Deno Request object?

hard

A. Use await req.json() to parse the JSON body

B. Use req.body.json() without await

C. Use JSON.parse(req.body) directly

D. Use req.getJson() method

Solution

1. Step 1: Understand how to parse JSON body in Deno

   The Request object has an async method json() that returns the parsed JSON from the body.

2. Step 2: Confirm correct usage

   You must await req.json() because it returns a Promise resolving to the parsed object.

3. Final Answer:

   Use await req.json() to parse the JSON body -> Option A

4. Quick Check:

   await req.json() parses JSON body correctly [OK]

Hint: Always await req.json() to get JSON body [OK]

Common Mistakes:

• Calling json() without await
• Trying to parse req.body directly
• Using non-existent getJson() method