5.02 详细解读TypeScript中的 request 对象

在 TypeScript 中，request 对象通常指的是 HTTP 请求对象。这个对象包含了发送到服务器的请求的所有相关信息。以下是对 request 对象的详细解读：

1. 基本属性：

   interface Request {
     method: string;          // 请求方法（GET, POST, PUT, DELETE等）
     url: string;             // 请求的URL
     headers: Headers;        // 请求头
     body: ReadableStream<Uint8Array> | null;  // 请求体
     mode: RequestMode;       // 请求模式（cors, no-cors, same-origin）
     credentials: RequestCredentials;  // 凭证模式（omit, same-origin, include）
     cache: RequestCache;     // 缓存模式
     redirect: RequestRedirect; // 重定向模式
     referrer: string;        // 请求的来源
     referrerPolicy: ReferrerPolicy;  // 引用策略
     integrity: string;       // 子资源完整性
     keepalive: boolean;      // 保持连接
     signal: AbortSignal | null;  // 用于中止请求的信号
   }

2. 请求头操作：

   // 获取特定请求头
   request.headers.get('Content-Type'): string | null;
    
   // 设置请求头
   request.headers.set('Authorization', 'Bearer token');
    
   // 添加请求头
   request.headers.append('Accept', 'application/json');
    
   // 删除请求头
   request.headers.delete('X-Custom-Header');

3. 请求体操作：

   请求体可以是多种格式，如 JSON、FormData、Blob 等。

   // 创建带有JSON体的请求
   const jsonRequest = new Request('https://api.example.com/data', {
     method: 'POST',
     headers: {
       'Content-Type': 'application/json',
     },
     body: JSON.stringify({ key: 'value' }),
   });
    
   // 创建带有FormData体的请求
   const formData = new FormData();
   formData.append('username', 'john');
   formData.append('password', 'secret');
   const formRequest = new Request('https://api.example.com/login', {
     method: 'POST',
     body: formData,
   });

4. 克隆请求：

   const clonedRequest = request.clone();

5. 在 Fetch API 中使用：

   const request = new Request('https://api.example.com/data', {
     method: 'GET',
     headers: {
       'Accept': 'application/json',
     },
   });
    
   fetch(request)
     .then(response => response.json())
     .then(data => console.log(data))
     .catch(error => console.error('Error:', error));

6. 在 Express. Js 中的 request 对象（服务器端）：

   在服务器端框架如 Express. Js 中，request 对象有不同的结构：

   interface Request {
     params: any;           // 路由参数
     query: any;            // 查询字符串参数
     body: any;             // 请求体（需要body-parser中间件）
     headers: IncomingHttpHeaders;  // 请求头
     cookies: any;          // Cookies（需要cookie-parser中间件）
     method: string;        // HTTP方法
     path: string;          // 请求路径
     protocol: string;      // 协议（http或https）
     ip: string;            // 客户端IP地址
     // ... 其他属性和方法
   }
    
   // 示例使用
   app.get('/api/users/:id', (req: Request, res: Response) => {
     const userId = req.params.id;
     const token = req.headers['authorization'];
     const queryParam = req.query.filter;
     // ... 处理请求
   });

7. 在 Axios 中创建请求配置：

   Axios 使用配置对象来定义请求，而不是 Request 对象：

   import axios from 'axios';
    
   const config: AxiosRequestConfig = {
     method: 'post',
     url: 'https://api.example.com/data',
     headers: {
       'Content-Type': 'application/json',
     },
     data: {
       key: 'value',
     },
   };
    
   axios(config)
     .then(response => console.log(response.data))
     .catch(error => console.error('Error:', error));

8. 安全考虑：

   在处理请求时，始终要考虑安全性：

   • 验证和清理输入数据
   • 使用 HTTPS
   • 实施适当的 CORS 策略
   • 保护敏感信息（如 API 密钥）

理解和正确使用 request 对象对于开发健壮和安全的 Web 应用程序至关重要。它允许你精确控制发送到服务器的请求，包括方法、头部、体和各种选项。在不同的环境（客户端、服务器端）和框架中，request 对象可能有不同的结构和用法，但基本概念是相似的。