Middleware patterns in Deno - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is middleware in the context of web frameworks?

Middleware is a function that runs between receiving a request and sending a response. It can modify the request, response, or control the flow to the next middleware.

intermediate

How does middleware chaining work in Deno's middleware pattern?

Middleware functions call the next middleware in the chain by invoking a provided 'next' function. This creates a sequence where each middleware can run code before and after the next one.

beginner

What is the purpose of calling 'await next()' inside a middleware function?

Calling 'await next()' passes control to the next middleware. It allows the current middleware to run code before and after the next middleware executes.

beginner

Why is middleware useful for tasks like logging, authentication, or error handling?

Middleware lets you separate concerns by handling common tasks in one place. This avoids repeating code and keeps the main logic clean.

beginner

In Deno, what is a common signature of a middleware function?

A middleware function usually takes two arguments: the context (ctx) and a next function. It looks like: async (ctx, next) => { ... }

What does the 'next' function do in a middleware chain?

A Ends the request immediately

B Passes control to the next middleware

C Sends the response to the client

D Logs the request details

The 'next' function passes control to the next middleware in the chain.

Which of these is NOT a typical use case for middleware?

A Database schema design

B Logging requests

C Authentication

D Error handling

Database schema design is not handled by middleware; middleware focuses on request/response processing.

In Deno middleware, what happens if you forget to call 'await next()'?

A The next middleware will not run

B The server crashes

C The response is sent twice

D Nothing happens

If 'await next()' is not called, the chain stops and the next middleware does not execute.

Middleware functions in Deno are usually:

A Synchronous functions

B Static HTML files

C Async functions with context and next parameters

D Classes

Middleware functions are async and receive context and next function parameters.

What is the benefit of middleware handling error responses?

A It duplicates error messages

B It makes the server slower

C It hides errors from developers

D It centralizes error handling in one place

Middleware centralizes error handling, making code cleaner and easier to maintain.

Explain how middleware chaining works in Deno and why 'await next()' is important.

Think about how one middleware lets another run after it.

Describe three common uses of middleware in web applications.

What tasks do you want to do for many requests in one place?

Practice

1. What is the main purpose of middleware in a Deno web application?

easy

A. To compile TypeScript code into JavaScript

B. To store data permanently in a database

C. To run code step-by-step for each incoming request

D. To create user interface components

Solution

1. Step 1: Understand middleware role

   Middleware processes each request in order, allowing code to run before sending a response.

2. Step 2: Compare options

   Only To run code step-by-step for each incoming request describes this step-by-step request handling. Other options describe unrelated tasks.

3. Final Answer:

   To run code step-by-step for each incoming request -> Option C

4. Quick Check:

   Middleware = step-by-step request code [OK]

Hint: Middleware runs code for each request in order [OK]

Common Mistakes:

• Confusing middleware with database operations
• Thinking middleware builds UI components
• Assuming middleware compiles code

2. Which of the following is the correct way to call the next middleware in Deno?

easy

A. next.await()

B. next()

C. call next()

D. await next()

Solution

1. Step 1: Recall async middleware pattern

   Middleware functions are async and must await next() to continue the chain.

2. Step 2: Check syntax correctness

   Only 'await next()' correctly waits for the next middleware to finish before continuing.

3. Final Answer:

   await next() -> Option D

4. Quick Check:

   Use await next() to proceed [OK]

Hint: Always use await before next() in async middleware [OK]

Common Mistakes:

• Calling next() without await causing unexpected behavior
• Using incorrect syntax like call next()
• Trying to use next.await() which is invalid

3. Given this middleware code snippet in Deno:

async function logger(ctx, next) {
  console.log('Before');
  await next();
  console.log('After');
}

async function handler(ctx) {
  ctx.response.body = 'Hello';
}

// Middleware chain: logger -> handler

What will be printed to the console when a request is handled?

medium

A. Before\nAfter

B. After\nBefore

C. Before

D. After

Solution

1. Step 1: Analyze middleware flow

   Logger prints 'Before', then awaits next middleware (handler), then prints 'After'.

2. Step 2: Understand order of prints

   Since handler runs between the two console.logs, output order is 'Before' then 'After'.

3. Final Answer:

   Before\nAfter -> Option A

4. Quick Check:

   Middleware logs before and after next() [OK]

Hint: Middleware logs before and after await next() [OK]

Common Mistakes:

• Assuming 'After' prints before 'Before'
• Thinking only 'Before' or 'After' prints
• Ignoring await causing wrong order

4. Identify the error in this Deno middleware code:

async function auth(ctx, next) {
  if (!ctx.request.headers.get('Authorization')) {
    ctx.response.status = 401;
    ctx.response.body = 'Unauthorized';
  }
  await next();
}

medium

A. Missing await before ctx.request.headers.get

B. Should return after setting 401 to stop middleware chain

C. ctx.response.body must be a JSON object

D. next() should not be awaited

Solution

1. Step 1: Understand middleware flow control

   If authorization header is missing, response is set to 401, but code still calls await next(), continuing the chain.

2. Step 2: Identify fix to stop chain

   To prevent further middleware running, function should return immediately after setting 401 response.

3. Final Answer:

   Should return after setting 401 to stop middleware chain -> Option B

4. Quick Check:

   Return early to stop middleware chain [OK]

Hint: Return after response to stop middleware chain [OK]

Common Mistakes:

• Not returning causes next middleware to run anyway
• Thinking await is missing on header get
• Believing response body must be JSON always

5. You want to create a middleware in Deno that measures how long each request takes and adds a custom header X-Response-Time with the duration in milliseconds. Which of the following middleware implementations correctly achieves this?

hard

A. async function responseTime(ctx, next) {
const start = performance.now();
await next();
const ms = performance.now() - start;
ctx.response.headers.set('X-Response-Time', ms.toFixed(2));
}

B. async function responseTime(ctx, next) {
const start = Date.now();
const ms = Date.now() - start;
ctx.response.headers.set('X-Response-Time', `${ms}ms`);
await next();
}

C. async function responseTime(ctx, next) {
const start = Date.now();
next();
const ms = Date.now() - start;
ctx.response.headers.set('X-Response-Time', `${ms}ms`);
}

D. async function responseTime(ctx, next) {
await next();
const ms = Date.now();
ctx.response.headers.set('X-Response-Time', ms);
}

Solution

1. Step 1: Measure time before and after next()

   Start timer before await next(), then calculate duration after it finishes.

2. Step 2: Use precise timer and set header correctly

   performance.now() gives better precision than Date.now(). Setting header with ms.toFixed(2) formats nicely.

3. Final Answer:

   Middleware using performance.now(), await next(), and setting header after next() -> Option A

4. Quick Check:

   Use performance.now() and await next() then set header [OK]

Hint: Start timer before await next(), set header after [OK]

Common Mistakes:

• Calculating time before await next() runs
• Using Date.now() which is less precise
• Setting header before next() completes