Data fetching with handlers in Deno - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a GET handler that returns a JSON response.

Deno

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

serve(async (req) => {
  if (req.method === "GET") {
    return new Response(JSON.stringify({ message: "Hello World" }), {
      headers: { "Content-Type": [1] }
    });
  }
  return new Response(null, { status: 405 });
});

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

A"application/xml"

B"application/json"

C"text/html"

D"text/plain"

Attempts:

3 left

💡 Hint

Common Mistakes

Using "text/html" or "text/plain" as Content-Type for JSON response.

Forgetting to stringify the JSON object.

The Content-Type header must be set to "application/json" to indicate the response is JSON.

2fill in blank

medium

Complete the code to parse JSON data from a POST request.

Deno

serve(async (req) => {
  if (req.method === "POST") {
    const data = await req.[1]();
    return new Response(JSON.stringify({ received: data }), {
      headers: { "Content-Type": "application/json" }
    });
  }
  return new Response(null, { status: 405 });
});

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

AarrayBuffer

Btext

CformData

Djson

Attempts:

3 left

💡 Hint

Common Mistakes

Using req.text() which returns raw text instead of parsed JSON.

Using req.formData() which is for form submissions.

To get JSON data from the request, use req.json() which returns a parsed object.

3fill in blank

hard

Fix the error in the handler to correctly respond with status 404 when the path is not found.

Deno

serve((req) => {
  const url = new URL(req.url);
  if (url.pathname === "/data") {
    return new Response("Data found", { status: 200 });
  } else {
    return new Response("Not found", { status: [1] });
  }
});

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

A500

B400

C404

D200

Attempts:

3 left

💡 Hint

Common Mistakes

Using 200 status code for not found response.

Using 500 which means server error.

Status code 404 means the requested resource was not found, which is correct here.

4fill in blank

hard

Fill both blanks to create a handler that responds with JSON only for GET requests and returns 405 for others.

Deno

serve((req) => {
  if (req.method === [1]) {
    return new Response(JSON.stringify({ status: "ok" }), {
      headers: { "Content-Type": [2] }
    });
  }
  return new Response(null, { status: 405 });
});

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

A"GET"

B"POST"

C"application/json"

D"text/plain"

Attempts:

3 left

💡 Hint

Common Mistakes

Checking for POST instead of GET.

Using wrong Content-Type header.

The handler should check for GET method and respond with JSON content type.

5fill in blank

hard

Fill all three blanks to create a POST handler that reads JSON, extracts 'name', and returns a greeting.

Deno

serve(async (req) => {
  if (req.method === [1]) {
    const data = await req.[2]();
    const name = data.[3] || "Guest";
    return new Response(JSON.stringify({ greeting: `Hello, ${name}!` }), {
      headers: { "Content-Type": "application/json" }
    });
  }
  return new Response(null, { status: 405 });
});

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

A"POST"

Bjson

Cname

D"GET"

Attempts:

3 left

💡 Hint

Common Mistakes

Checking for GET instead of POST.

Using req.text() instead of req.json().

Accessing wrong property name.

The handler must check for POST, parse JSON with req.json(), and access the 'name' property.

Practice

1. What is the main purpose of using a handler function with serve in Deno for data fetching?

easy

A. To compile TypeScript code into JavaScript

B. To create a database connection automatically

C. To style the webpage with CSS

D. To process incoming requests and send back appropriate responses

Solution

1. Step 1: Understand the role of serve and handler

   The serve function listens for incoming HTTP requests and uses the handler function to decide how to respond.

2. Step 2: Identify the handler's purpose

   The handler processes each request and returns the correct response, such as data or status messages.

3. Final Answer:

   To process incoming requests and send back appropriate responses -> Option D

4. Quick Check:

   Handler processes requests = D [OK]

Hint: Handler functions decide responses for requests [OK]

Common Mistakes:

• Thinking handler creates database connections automatically
• Confusing handler with styling or compilation tasks
• Assuming serve compiles code

2. Which of the following is the correct syntax to start a basic HTTP server in Deno using a handler function named handler?

easy

A. handler.serve();

B. serve(handler);

C. serve = handler();

D. serve->handler();

Solution

1. Step 1: Recall the serve function usage

   In Deno, serve is called with the handler function as an argument to start the server.

2. Step 2: Check syntax correctness

   The correct syntax is serve(handler); which passes the handler function properly.

3. Final Answer:

   serve(handler); -> Option B

4. Quick Check:

   serve called with handler function = C [OK]

Hint: Call serve with handler function name only [OK]

Common Mistakes:

• Using assignment instead of function call
• Trying to call serve as a method on handler
• Using invalid arrow syntax

3. Given this handler code snippet in Deno:

async function handler(req) {
  if (req.url.endsWith('/hello')) {
    return new Response('Hello World');
  }
  return new Response('Not Found', { status: 404 });
}

What will the server respond when a request is made to http://localhost:8000/hello?

medium

A. A response with body 'Hello World'

B. A 404 Not Found response

C. An empty response with status 200

D. A runtime error occurs

Solution

1. Step 1: Analyze the URL condition in handler

   The handler checks if the request URL ends with '/hello'. If yes, it returns 'Hello World'.

2. Step 2: Match the request URL

   The request URL is exactly '/hello', so the condition is true and the response is 'Hello World'.

3. Final Answer:

   A response with body 'Hello World' -> Option A

4. Quick Check:

   URL ends with '/hello' returns 'Hello World' = B [OK]

Hint: Check URL endsWith condition to find response [OK]

Common Mistakes:

• Assuming 404 because of missing else
• Thinking response body is empty
• Expecting runtime error from this code

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

async function handler(req) {
  if (req.url === '/data') {
    const data = await fetch('https://api.example.com/data');
    return data.json();
  }
  return new Response('Not Found', { status: 404 });
}

medium

A. req.url should be req.path

B. Cannot use fetch inside handler

C. Missing await before data.json()

D. Response status 404 is invalid

Solution

1. Step 1: Understand fetch and response handling

   The fetch returns a Response object; calling data.json() returns a Promise that must be awaited.

2. Step 2: Identify missing await

   The code returns data.json() without awaiting it, which returns a Promise instead of a Response object.

3. Final Answer:

   Missing await before data.json() -> Option C

4. Quick Check:

   Await JSON parsing Promise = A [OK]

Hint: Always await async JSON parsing in handlers [OK]

Common Mistakes:

• Thinking fetch is disallowed in handlers
• Using req.path instead of req.url
• Believing 404 status is invalid

5. You want to create a Deno server that fetches user data from an external API only when the request URL is /user. Which handler function correctly fetches the JSON data and returns it as a JSON response?

hard

A. async function handler(req) {
if (req.url.endsWith('/user')) {
const response = await fetch('https://api.example.com/user');
const data = await response.json();
return new Response(JSON.stringify(data), { headers: { 'Content-Type': 'application/json' } });
}
return new Response('Not Found', { status: 404 });
}

B. async function handler(req) {
if (req.url === '/user') {
const data = fetch('https://api.example.com/user').json();
return new Response(data);
}
return new Response('Not Found');
}

C. function handler(req) {
if (req.url === '/user') {
const data = await fetch('https://api.example.com/user').json();
return new Response(JSON.stringify(data));
}
return new Response('Not Found');
}

D. async function handler(req) {
if (req.url.includes('/user')) {
const response = await fetch('https://api.example.com/user');
return response.json();
}
return new Response('Not Found', { status: 404 });
}

Solution

1. Step 1: Check correct async handling and URL matching

   async function handler(req) { if (req.url.endsWith('/user')) { const response = await fetch('https://api.example.com/user'); const data = await response.json(); return new Response(JSON.stringify(data), { headers: { 'Content-Type': 'application/json' } }); } return new Response('Not Found', { status: 404 }); } uses endsWith('/user') to match URL and awaits both fetch and response.json(), which is correct.

2. Step 2: Verify response formatting

   async function handler(req) { if (req.url.endsWith('/user')) { const response = await fetch('https://api.example.com/user'); const data = await response.json(); return new Response(JSON.stringify(data), { headers: { 'Content-Type': 'application/json' } }); } return new Response('Not Found', { status: 404 }); } returns a new Response with JSON string and correct Content-Type header, ensuring proper JSON response.

3. Final Answer:

   Option A correctly fetches and returns JSON data with proper async handling and headers -> Option A

4. Quick Check:

   Await fetch and json, set JSON header = A [OK]

Hint: Await fetch and json, set JSON content-type header [OK]

Common Mistakes:

• Not awaiting response.json()
• Returning raw Promise instead of Response
• Missing Content-Type header for JSON
• Using non-async function with await