Data fetching with handlers in Deno - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What does this Deno handler return?

Consider this Deno handler function that fetches JSON data from an API and returns a response. What will be the output when this handler is called?

Deno

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

serve(async (req) => {
  const response = await fetch("https://jsonplaceholder.typicode.com/todos/1");
  const data = await response.json();
  return new Response(JSON.stringify({ title: data.title }), {
    headers: { "Content-Type": "application/json" },
  });
});

A {"title":"delectus aut autem"}

B {"userId":1,"id":1,"title":"delectus aut autem","completed":false}

C Response object with status 404

D SyntaxError due to missing await

💡 Hint

Look at what part of the fetched data is included in the returned JSON.

The handler fetches the todo item, extracts the title property, and returns only that in the JSON response. So the output JSON contains only the title key with its value.

📝 Syntax

intermediate

Which option causes a syntax error in this Deno fetch handler?

Identify which code snippet will cause a syntax error when used as a Deno HTTP handler fetching data.

Deno

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

serve(async (req) => {
  const response = await fetch("https://api.example.com/data");
  const data = await response.json();
  return new Response(JSON.stringify(data), {
    headers: { "Content-Type": "application/json" },
  });
});

A const response = fetch("https://api.example.com/data")

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

C const data = await response.json()

D async (req) => { const data = await response.json(); return new Response(JSON.stringify(data)); }

💡 Hint

Check if all await keywords are used properly with async functions.

Option A misses the await keyword before fetch, so response is a Promise, not the resolved response object. This causes an error when calling response.json().

🔧 Debug

advanced

Why does this Deno handler return an empty response?

This handler is supposed to fetch user data and return it as JSON, but it returns an empty response body. What is the cause?

Deno

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

serve(async (req) => {
  const response = await fetch("https://jsonplaceholder.typicode.com/users/1");
  response.json();
  return new Response(JSON.stringify(response), {
    headers: { "Content-Type": "application/json" },
  });
});

A Headers are missing Content-Type

B The fetch URL is incorrect and returns 404

C Response constructor is missing status code

D response.json() is not awaited, so JSON data is not extracted

💡 Hint

Check if the JSON extraction is handled correctly with async/await.

The code calls response.json() but does not await it or assign the result. So the JSON data is never extracted and the response object is stringified instead, resulting in an empty or incorrect body.

❓ state_output

advanced

What is the value of 'count' after multiple fetches in this Deno handler?

This Deno handler counts how many times it has been called by incrementing a variable. What is the value of 'count' after three requests?

Deno

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

let count = 0;

serve(() => {
  count += 1;
  return new Response(`Request count: ${count}`, {
    headers: { "Content-Type": "text/plain" },
  });
});

A 1

B 3

C 0

D undefined

💡 Hint

Consider if the variable 'count' persists between requests.

The variable 'count' is declared outside the handler and increments on each request. After three requests, it will be 3.

🧠 Conceptual

expert

Which option best explains why this Deno handler uses 'await' with fetch?

Why is it important to use 'await' when calling fetch inside an async Deno handler?

A Because 'await' converts the fetch response into a string automatically.

B Because 'await' makes fetch run faster by parallelizing requests automatically.

C Because fetch returns a Promise and 'await' pauses execution until the data is ready, ensuring the handler returns the actual data.

D Because without 'await', fetch will throw a syntax error immediately.

💡 Hint

Think about what fetch returns and how async functions handle Promises.

'fetch' returns a Promise that resolves to a Response object. Using 'await' pauses the async function until the Promise resolves, so you get the actual response data to work with.

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