Workers Playground 常见陷阱

# Workers Playground 常见问题与陷阱 ## 平台限制 | 限制 | 影响 | 变通方案 | |------------|--------|------------| | Safari 无法使用 | 预览失败 | 使用 Chrome/Firefox/Edge | | 不支持 TypeScript | TS 语法错误 | 编写纯 JS 或使用 JSDoc | | 无绑定 (Bindings) | `env` 始终为 `{}` | 模拟数据或使用外部 API | | 无环境变量 | 无法访问密钥 | 测试时硬编码 | ## 常见运行时错误 ### "Response body already read" (响应体已被读取) javascript // ❌ 响应体被消耗了两次 const body = await request.text(); await fetch(url, { body: request.body }); // 错误！ // ✅ 先克隆 const clone = request.clone(); const body = await request.text(); await fetch(url, { body: clone.body }); ### "Worker exceeded CPU time" (Worker 超出 CPU 时间) **限制：** 10ms (免费版), 50ms (付费版) javascript // ✅ 将耗时工作移至后台 ctx.waitUntil(fetch('https://analytics.example.com', {...})); return new Response('OK'); // 立即返回 ### "Too many subrequests" (子请求过多) **限制：** 50 (免费版), 1000 (付费版) javascript // ❌ 100 个独立请求 // ✅ 批量处理为单个 API 调用 await fetch('https://api.example.com/batch', { body: JSON.stringify({ ids: [...] }) }); ## 最佳实践 javascript // 缓存前先克隆 await cache.put(request, response.clone()); return response; // 尽早验证输入 if (request.method !== 'POST') return new Response('', { status: 405 }); // 处理错误 try { ... } catch (e) { return Response.json({ error: e.message }, { status: 500 }); } ## 限制 | 资源 | 免费版 | 付费版 | |----------|------|------| | CPU 时间 | 10ms | 50ms | | 内存 | 128 MB | 128 MB | | 子请求 | 50 | 1000 | ## 浏览器支持 | 浏览器 | 状态 | |---------|--------| | Chrome | ✅ 推荐 | | Firefox | ✅ 可用 | | Edge | ✅ 可用 | | Safari | ❌ 无法使用 | ## 调试 javascript console.log('URL:', request.url); // 在浏览器开发者工具控制台中查看 **注意：** `console.log` 在 playground 中有效。对于生产环境，请使用 Logpush 或 Tail Workers。