前端fetch流式数据接收

功能介绍：
使用 Fetch API 发送请求并通过 ReadableStream 接收流式响应，实现 AI 回答的实时渲染效果。通过 TextDecoder 解码响应流并逐步更新界面。

功能代码：

        // 发送POST请求fetch接口
        let resp = await fetch('接口地址', {
          method: "post",
          // 根据后端要求传对应的headers参数
          headers: {
            "Content-Type": "application/json",
            Authorization: "",  // token
          },
          body: {},  // 传递参数
        });

        // 检查响应状态
        if (!resp.ok) {
          throw new Error("Network response was not ok");
        }

        // 创建流式读取器和文本解码器
        let reader = resp.body.getReader();  // 获取响应体的读取器
        let textDecoder = new TextDecoder();  // 创建文本解码器
        let getdata;  // 用于存储解析后的数据

        // 循环读取流式响应
        while (true) {
          try {
            // 读取数据流
            let { done, value } = await reader.read();
            if (done) break;  // 如果读取完成则退出循环

            // 解码二进制数据为文本
            let str = textDecoder.decode(value);

            getdata = JSON.parse(str);

            // 如果返回内容有效且不是结束标志，则更新最新内容
            if (getdata.content && getdata.content !== "over") {
                this.getData = getdata.content;
            }
          } catch (error) {
            // 捕获并记录流读取错误
            console.error("Stream reading error:", error);
            break;
          }
        }

        // 处理完整的响应数据
        if (getdata && getdata.messag) {
          this.$emit("end"); // 请求结束
        }