fetch请求API示例

# AI对话助手 - SSE版本 这是一个基于Server-Sent Events (SSE)的AI对话页面，支持实时流式对话和中断功能。 ## 功能特性 - 🚀 **实时流式对话**: 使用SSE技术实现实时响应 - ⏹️ **中断机制**: 用户可以随时中断AI的回答 - 📱 **响应式设计**: 支持桌面和移动设备 - 🎨 **现代化UI**: 美观的渐变设计和流畅动画 - ⌨️ **键盘快捷键**: 支持Enter发送，Shift+Enter换行 - 📊 **字符计数**: 实时显示输入字符数量 ## 技术实现 - **前端**: 原生HTML5 + CSS3 + JavaScript (ES6+) - **通信**: Fetch API + AbortController - **流式处理**: ReadableStream + TextDecoder - **中断控制**: AbortController用于取消请求 ## 使用方法 1. 直接在浏览器中打开 `index.html` 文件 2. 在输入框中输入你的问题 3. 点击发送按钮或按Enter键发送消息 4. 如果AI正在回答，可以点击"停止回答"按钮中断 ## API配置 当前配置的API端点： - **URL**: `https://api.your-pat.com/your-path` - **方法**: POST - **认证**: x-token header - **数据格式**: JSON ## 文件结构 ``` ├── index.html # 主页面 ├── styles.css # 样式文件 ├── script.js # JavaScript逻辑 └── README.md # 说明文档 ``` ## 浏览器兼容性 - Chrome 66+ - Firefox 57+ - Safari 11.1+ - Edge 79+ ## 注意事项 1. 确保网络连接正常 2. API token需要有效 3. 如果API不支持SSE，会自动降级为普通JSON响应 4. 中断功能依赖于AbortController API ## 自定义配置 如需修改API配置，请编辑 `script.js` 文件中的以下部分： ```javascript const response = await fetch('YOUR_API_URL', { method: 'POST', headers: { 'Content-Type': 'application/json', 'x-token': 'YOUR_TOKEN', 'User-Agent': 'YOUR_USER_AGENT' }, body: JSON.stringify({ content }), signal: this.currentController.signal }); ``` ## 许可证 MIT License