ChatGPT页面代码实现解析：从接口调用到前端渲染的最佳实践

1次阅读

没有评论

共计 2729 个字符，预计需要花费 7 分钟才能阅读完成。

ChatGPT API 基于 OpenAI 的 GPT 模型，提供自然语言处理能力。其核心是通过 HTTP 请求发送提示文本(prompt)，接收模型生成的响应(response)。典型应用包括：

智能客服对话系统
内容生成与润色
代码辅助编写
语言翻译与摘要

实际集成过程中常见问题：

接口限流：免费版每分钟 3 - 5 次请求限制
响应延迟：复杂请求可能需要 10-20 秒
上下文管理：多轮对话需要维护历史记录
错误处理：API 返回非 200 状态码时的容错
数据安全：敏感信息可能通过 prompt 泄露

推荐采用 React/Vue 等现代框架实现：

消息列表组件：展示对话历史
输入框组件：带发送按钮的文本区域
状态管理：维护对话上下文
加载状态：请求期间的 UI 反馈

建议中间层封装原始 API，实现：

请求参数标准化
错误统一处理
访问频率控制
敏感信息过滤

应包含以下层级的错误处理：

网络错误（超时、断开）
API 错误（4xx/5xx 响应）
业务错误（内容过滤、额度不足）

function ChatInterface() {const [messages, setMessages] = useState([]);
  const [input, setInput] = useState('');
  const [loading, setLoading] = useState(false);

  const handleSend = async () => {if (!input.trim()) return;

    const userMessage = {role: 'user', content: input};
    setMessages(prev => [...prev, userMessage]);
    setLoading(true);

    try {
      const response = await fetch('/api/chat', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({messages: [...messages, userMessage],
          max_tokens: 150
        })
      });

      const data = await response.json();
      setMessages(prev => [...prev, data.choices[0].message]);
    } catch (error) {console.error('API 请求失败:', error);
    } finally {setLoading(false);
      setInput('');
    }
  };

  return (
    <div className="chat-container">
      <MessageList messages={messages} />
      <InputField 
        value={input}
        onChange={setInput}
        onSend={handleSend}
        disabled={loading}
      />
      {loading && <LoadingIndicator />}
    </div>
  );
}

const axios = require('axios');
const rateLimit = require('express-rate-limit');

// 限流中间件
const apiLimiter = rateLimit({
  windowMs: 60 * 1000, // 1 分钟
  max: 5 // 每个 IP 5 次请求
});

app.post('/api/chat', apiLimiter, async (req, res) => {
  try {const { messages, max_tokens = 150} = req.body;

    // 敏感信息检查
    if (containsSensitiveInfo(messages)) {return res.status(400).json({error: '请求包含敏感内容'});
    }

    const response = await axios.post(
      'https://api.openai.com/v1/chat/completions',
      {
        model: "gpt-3.5-turbo",
        messages,
        max_tokens
      },
      {
        headers: {'Authorization': `Bearer ${process.env.OPENAI_KEY}`,
          'Content-Type': 'application/json'
        },
        timeout: 20000 // 20 秒超时
      }
    );

    res.json(response.data);
  } catch (error) {console.error('API 调用失败:', error);

    if (error.response) {
      // OpenAI API 返回的错误
      res.status(error.response.status).json({error: error.response.data.error?.message || 'API 请求失败'});
    } else if (error.request) {
      // 请求已发出但无响应
      res.status(504).json({error: '请求超时，请重试'});
    } else {
      // 其他错误
      res.status(500).json({error: '服务器内部错误'});
    }
  }
});

客户端缓存：本地存储常见问题的回答
服务端缓存：Redis 缓存高频请求的响应

前端：防抖处理快速连续发送
后端：队列管理并发请求

只发送必要的对话历史
合理设置 max_tokens

输入过滤：检查 prompt 中的敏感词
输出过滤：检查响应中的不当内容
HTTPS 加密：所有 API 通信必须加密
访问控制：API 密钥严格保密
日志脱敏：记录日志时移除敏感信息

问题现象	可能原因	解决方案
响应缓慢	复杂 prompt 或网络延迟	优化 prompt 结构，增加超时处理
返回空响应	max_tokens 设置过小	适当增加 max_tokens 值
上下文丢失	未维护对话历史	在请求中包含完整对话记录
额度超限	达到 API 调用限制	实施请求速率控制