当前位置: 首页 > article >正文

解决从deepseek接口获取的流式响应输出到前端都是undefined的问题

在这里插入图片描述
你的前端 EventSource 代码遇到了 undefined 连续输出 的问题,通常是因为:

  1. AI 返回的内容被拆成了单个字符,导致前端 JSON.parse(event.data).content 获取到的是单个字符,而 undefined 可能是因为某些数据块没有 content 字段。
  2. 前端拼接字符串时,错误地处理了 undefined,导致 undefined 被拼接到页面上。

✅ 解决方案

1️⃣ 修正后端(确保 AI 输出的是 “块” 而不是单个字符)

你的 AI 可能逐字符返回内容,需要在后端 合并成合理的块,然后以 SSE 格式输出:

import json

def generate_category_description(messages, client):
    """调用 DeepSeek API 并流式返回符合 SSE 格式的 JSON"""
    response = client.chat.completions.create(
        model="deepseek-chat",
        messages=messages,
        response_format={"type": "json_object"},
        stream=True  # 设置为 True,以便接收流式数据
    )

    buffer = ""  # 临时存储数据,防止单字符输出

    for chunk in response:
        if not chunk.choices:
            continue  # 跳过空数据

        content = chunk.choices[0].delta.content or ""  # 取 AI 返回的内容
        buffer += content  # 逐步累积内容

        if len(buffer) >= 10:  # 只有在积累到 10 个字符后才发送
            print(buffer, end='', flush=True)  # 实时流式输出到控制台
            yield f"data: {json.dumps({'content': buffer})}\n\n"
            buffer = ""  # 发送后清空 buffer

    # 发送剩余的内容(如果有的话)
    if buffer:
        yield f"data: {json.dumps({'content': buffer})}\n\n"

2️⃣ 修正前端(处理 undefined 并正确拼接流式数据)

你的 EventSource 代码没有正确处理 undefined,需要修正:

async function generateCategoryDesc() {
  const eventSource = new EventSource("/generate_category_desc_stream");
  let contentBuffer = ""; // 存储完整的内容

  eventSource.onmessage = (event) => {
    try {
      console.log("Raw event data:", event.data);
      const data = JSON.parse(event.data);

      if (data.content) {  // 确保 content 存在
        contentBuffer += data.content; // 拼接完整内容
        document.getElementById("editArea").innerHTML = contentBuffer; // 更新页面
      }
    } catch (err) {
      console.error("JSON parse error:", err, "Raw event data:", event.data);
    }
  };

  eventSource.onerror = (err) => {
    console.error("EventSource failed:", err);
    eventSource.close();
  };

  eventSource.onopen = () => {
    console.log("SSE connection opened.");
  };
}

🔥 关键修正

后端:

  • 确保 buffer 缓冲字符,防止逐字符发送
  • 积累到足够字符后才 yield,防止前端 undefined 乱拼接
  • 如果 AI 只返回一个字符,后端会等到 10 个字符后才发送

前端:

  • 检查 data.content 是否为 undefined,避免拼接 undefined
  • 修正 EventSource 解析逻辑,确保流式数据完整
  • 修正 contentBuffer 逻辑,确保拼接的数据正确

🚀 结果

  • 流式 AI 输出不会拆成单个字符
  • 前端不会出现 undefined
  • 文本会按块(10 字符)更新到 editArea
  • AI 生成的内容仍然是流式的,不影响流式体验

现在试试看,你的 editArea 应该会正常流式更新,而不会出现 undefinedundefinedundefined 的问题了!


http://www.kler.cn/a/590055.html

相关文章:

  • 微服务架构中10个常用的设计模式
  • 平面阵列天线波束形成的Matlab仿真
  • 一场由 ES 分片 routing 引发的问题
  • 2025年Postman的五大替代工具
  • 【软考-架构】5.3、IPv6-网络规划-网络存储-补充考点
  • SpringData Redis:RedisTemplate配置与数据操作
  • 02 windows qt配置ffmpeg开发环境搭建
  • 电脑如何录屏
  • failed to load elasticsearch nodes
  • SpringBoot + Mybatis Plus 整合 Redis
  • mariaDB中常见的DDL,DML,DQL语句
  • 协程池是调用端并发请求的缓释胶囊
  • Spring设计模式 八股速记 高层模块底层模块 依赖倒置原则 开闭原则 接口隔离原则
  • WD5202L超低成本 Buck 电源芯片的特性与应用电路解析, 将市电转换为 5V 电压
  • 缓存相关内容
  • 利用AI让数据可视化
  • JVM 垃圾回收器分类及其特点详解
  • 【新人系列】Golang 入门(六):函数基础
  • 用uv管理python环境/项目(各种应用场景)
  • Linux中Tomcat、idea和MySQL的安装