Data fetching with handlers in Deno - Step-by-Step Execution

Concept Flow - Data fetching with handlers

Client sends request

↓

Handler receives request

↓

Handler calls fetch API

↓

Wait for response

↓

Process response data

↓

Send processed data back to client

↓

End

The handler receives a client request, fetches data from an external source, processes it, and sends the result back.

Execution Sample

Deno

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

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

This code sets up a server handler that fetches JSON data from an API and returns it to the client.

Execution Table

Step	Action	Evaluation	Result
1	Server receives client request	Request object created	Handler function triggered
2	Handler calls fetch with URL	fetch("https://api.example.com/data")	Promise pending
3	Await fetch response	Response received	Response object with status 200
4	Call response.json()	Parse JSON body	Parsed JSON data object
5	Create new Response with JSON string	JSON.stringify(data)	Response ready with JSON body
6	Send response to client	Response sent	Client receives JSON data
7	End of handler execution	No more code	Handler waits for next request

💡 Handler finishes after sending response to client.

Variable Tracker

Variable	Start	After Step 2	After Step 3	After Step 4	After Step 5	Final
req	undefined	Request object	Request object	Request object	Request object	Request object
res	undefined	Promise pending	Response object	Response object	Response object	Response object
data	undefined	undefined	undefined	Parsed JSON object	Parsed JSON object	Parsed JSON object

Key Moments - 3 Insights

Why do we use 'await' before fetch and response.json()?

Because fetch and response.json() return promises, 'await' pauses execution until the data is ready, as shown in steps 3 and 4 of the execution_table.

What happens if we forget to return the Response object from the handler?

The client will not receive any data and the request will hang or fail, since the handler must return a Response as in step 5.

Why do we stringify the data before sending it back?

Because Response expects a string or a stream as body, so we convert the JSON object to a string with JSON.stringify, as in step 5.

Visual Quiz - 3 Questions

Look at the execution_table, what is the value of 'data' after step 4?

A Parsed JSON object

B A Promise pending

C Undefined

D Response object

💡 Hint

Check the 'data' variable in variable_tracker after step 4.

At which step does the handler send the response back to the client?

A Step 3

B Step 6

C Step 5

D Step 7

💡 Hint

Look for the action 'Send response to client' in execution_table.

If we remove 'await' before fetch, what will happen to 'res' after step 2?

A It will be a Response object

B It will be undefined

C It will be a Promise pending

D It will be the JSON data

💡 Hint

Refer to the execution_table row for step 2 and variable_tracker for 'res'.

Concept Snapshot

Data fetching with handlers in Deno:
- Use async handler functions
- Call fetch() with await to get response
- Use response.json() with await to parse JSON
- Return new Response with JSON string and content-type header
- Handler sends data back to client
- Always await promises to get actual data

Full Transcript

This visual execution trace shows how a Deno server handler fetches data from an external API and returns it to the client. The handler receives a request, calls fetch with await to get the response, then awaits response.json() to parse the JSON data. It then creates a new Response object with the JSON string and sends it back. Variables like 'res' and 'data' change from promises to actual data objects as the code runs. Key points include the need to await promises and to return a Response object. The quiz questions check understanding of variable states and execution steps.

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