Edge Computing with Cloudflare Workers & Deno · 课时

路由与中间件

利用路由库和中间件模式组织并增强您的 Worker API

路由与中间件 是 CoddyKit 上的免费 Edge Computing with Cloudflare Workers & Deno 课时。这是第 2 节课，共 3 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 Edge Computing with Cloudflare Workers & Deno 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Edge Computing with Cloudflare Workers & Deno 课程共包含 3 节课。

本课时的部分内容尚未翻译，以英文显示。

API Routing Essentials

When building APIs, we need a way to direct incoming requests to the correct functions based on their URL path and HTTP method (GET, POST, etc.). This process is called routing.

Think of it like a receptionist for your API. When a request comes in, the router checks its destination and sends it to the right department (your code handler).

Manual Worker Routing

In a Cloudflare Worker, all incoming requests are handled by the fetch event listener. You can manually inspect the request's URL and method to decide what to do.

While possible for simple cases, this approach quickly becomes complex and hard to manage as your API grows.

export default {
  async fetch(request) {
    const url = new URL(request.url);
    if (url.pathname === '/hello' && request.method === 'GET') {
      return new Response('Hello from manual route!');
    }
    return new Response('Not Found', { status: 404 });
  }
}

Introducing itty-router

To simplify routing, we use lightweight libraries. For Cloudflare Workers, itty-router is a popular choice. It's tiny, fast, and designed for the edge.

It provides a clean, expressive way to define routes and handlers, making your Worker code much more organized.

Basic GET Routes

With itty-router, you can define routes using methods like router.get() for GET requests. Each route takes a path and a handler function.

Let's create a simple Worker that responds to / and /greet.

import { Router } from 'itty-router';

const router = Router();

router.get('/', () => new Response('Welcome to the API!'));
router.get('/greet', () => new Response('Hello there!'));

export default {
  fetch: router.handle
};

Handling All HTTP Methods

itty-router allows you to define routes for specific HTTP methods like .post(), .put(), .delete(), and more.

You can also use .all() to match any HTTP method for a given path, useful for middleware or generic handlers.

import { Router } from 'itty-router';

const router = Router();

router.get('/data', () => new Response('GET data'));
router.post('/data', () => new Response('POST data', { status: 201 }));
router.all('*', () => new Response('Method Not Allowed', { status: 405 }));

export default {
  fetch: router.handle
};

Dynamic Route Parameters

Often, you need to extract dynamic values from the URL, like an item ID or a username. These are called route parameters.

itty-router uses a colon (:) to define parameters in a route path. The values are then available in the handler's request.params object.

import { Router } from 'itty-router';

const router = Router();

router.get('/users/:id', ({ params }) => {
  return new Response(`Fetching user ${params.id}`);
});

export default {
  fetch: router.handle
};

What is Middleware?

Middleware functions are code snippets that run before or after your main route handler. They can modify the request, perform logging, check authentication, or add headers to the response.

They act as a pipeline, allowing you to add common functionalities across multiple routes without duplicating code.

Implementing Simple Middleware

With itty-router, middleware can be added to specific routes or globally. A middleware function receives the request and can return a response (ending the chain) or continue to the next handler.

Let's add a simple logging middleware that runs for every request.

import { Router } from 'itty-router';

const router = Router();

const loggerMiddleware = async (request, event) => {
  console.log(`Request: ${request.method} ${request.url}`);
  // To proceed to the next handler, don't return a Response.
  // If you return a Response, the chain stops.
};

router.all('*', loggerMiddleware);
router.get('/hello', () => new Response('Hello from route!'));

export default {
  fetch: router.handle
};

Chaining Middleware

You can chain multiple middleware functions. Each middleware executes in order. If a middleware doesn't return a response, the next one in the chain (or the final route handler) is called.

This allows for powerful, modular processing of requests, like authentication, data parsing, and logging.

import { Router } from 'itty-router';

const router = Router();

const authMiddleware = async (request) => {
  if (request.headers.get('Authorization') !== 'Bearer token123') {
    return new Response('Unauthorized', { status: 401 });
  }
};

const headerMiddleware = async (request, event) => {
  // Add a custom header to the response later
  event.response = new Response('', { headers: { 'X-Powered-By': 'CoddyKit' } });
};

router.get('/secure', authMiddleware, (request) => {
  return new Response('Access granted!');
});
router.get('/info', headerMiddleware, (request) => {
  return new Response('Info page');
});

export default {
  fetch: async (request, env, ctx) => {
    const response = await router.handle(request, env, ctx);
    // Merge headers from middleware if present
    if (ctx.response && response) {
      for (let [key, value] of ctx.response.headers.entries()) {
        response.headers.set(key, value);
      }
    }
    return response;
  }
};

Routing & Middleware Check

Consider a Cloudflare Worker using itty-router. You want to ensure that all requests to /admin/* paths require an X-Admin-Key header, and if it's missing, return a 403 Forbidden response. Other paths should not be affected.

Recap: Routing & Middleware

You've mastered the fundamentals of organizing your edge API with routing and middleware!

Routing directs requests to the right handlers.
Libraries like itty-router simplify route definition, including dynamic parameters.
Middleware functions enhance requests/responses, adding common logic like logging or authentication before (or after) the main handler.

These patterns are crucial for building scalable and maintainable serverless APIs at the edge.

常见问题解答

「路由与中间件」课时是免费的吗？

是的 — 「路由与中间件」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Edge Computing with Cloudflare Workers & Deno 课程的其余内容，请升级到 CoddyKit PRO。 Edge Computing with Cloudflare Workers & Deno 课程共包含 3 节课。

「路由与中间件」这节课中我会学到什么？

利用路由库和中间件模式组织并增强您的 Worker API 你通过在浏览器中直接运行的动手代码来练习 Edge Computing with Cloudflare Workers & Deno，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Edge Computing with Cloudflare Workers & Deno 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Edge Computing with Cloudflare Workers & Deno 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 2 节课，共 3 节。

「路由与中间件」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Edge Computing with Cloudflare Workers & Deno 课中编写并运行代码吗？

能。每节 Edge Computing with Cloudflare Workers & Deno 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 Edge Computing with Cloudflare Workers & Deno