vue2接收流式接口返回的数据

1、Nginx 代理需要关闭缓存机制

2、前端用fetch接收(我用的)，还可以用其他的方式去接收

  methods: {
    getContent() {
      let parmas = {};
      const controller = new AbortController();
      const { signal } = controller;
      fetch("你的url", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          "Access-Control-Allow-Origin": "*"
        },
        body: JSON.stringify(parmas),
        signal
      })
        .then(async response => {
          if (!response.body) {
            throw new Error("No response body received from server.");
          }

          // 流形式数据，只允许解析一遍，get过后就没了，所以务必不要多次解析！！！
          const reader = response.body.getReader();
          if (!reader) {
            throw new Error("Failed to obtain reader from response body.");
          }

          const decoder = new TextDecoder("utf-8");
          let isDone = false;
          let buffer = ``; // 用于存储和解析 SSE 数据
          while (!isDone) {
            try {
              if (!reader || !response.body) {
                break;
              }
              const { done, value } = await reader.read();
              isDone = done;
              if (done) {
                break; // 退出循环
              }
              if (!value) {
                continue;
              }
              const decodedText = decoder.decode(value, { stream: true });
              buffer += decodedText;
              let parts = buffer.split("\n\n");
              buffer = parts.pop();
              parts.forEach(part => {
                try {
                  if (this.processChunk(part.trim())) {
                    isDone = true;
                  }
                } catch (error) {
                  throw error;
                }
              });
            } catch (readError) {
              throw readError;
            }
          }
          if (buffer && !isDone) {
            // 仅当流未结束时处理 buffer
            try {
              if (this.processChunk(buffer)) {
                isDone = true;
              }
            } catch (error) {
              throw error;
            }
          }
          if (isDone) {
            controller.abort();
          }
        })
        .catch(err => {
          console.log("message", err);
          controller.abort();
        });
    },
    processChunk(chunk) {
      let messages = chunk.split("data: ");
      for (let message of messages) {
        if (message.endsWith("data:[DONE]")) {
          message = message.split("data:[DONE]")[0];
        }
        if (message) {
          const parsedMessage = JSON.parse(message);
          let { id = "" } = parsedMessage;
          this.conversationId = id;
          if (parsedMessage.choices && parsedMessage.choices.length > 0) {
            const delta = parsedMessage.choices[0].delta;
            if (delta.content) {
              this.content =+ delta.content;
            }
          }
        }
      }
    }
  }

注意：片段会有接收不全的情况，需要拼接成一个整的再去渲染到页面上，成功后控制台显示多条记录。