Vue3 人机对话界面实现：流式请求与 ECharts 图表集成

1. 流式响应：告别漫长等待，实现即时打字机效果

传统的 API 请求模式是'发送请求 -> 等待 -> 接收完整响应'。这对于 AI 生成长文本的场景来说，用户体验很差。更好的方式是像 ChatGPT 那样，实现流式响应，即 AI 边生成边返回结果，前端边接收边显示，营造出'打字机'般的效果。

fetchStream 函数

// utils/streamUtils.js 或直接写在组件中
export async function fetchStream(url, data, onChunk, onError, onComplete, signal) {
  try {
    const response = await fetch(url, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(data),
      signal,
    });
    if (!response.ok || !response.body) {
      throw new Error('Response body is not readable');
    }
    const reader = response.body.getReader();
    const decoder = new TextDecoder('utf-8');
    let done = false;
    try {
      while (!done) {
        const { value, done: streamDone } = await reader.read();
        done = streamDone;
        if (value) {
          const chunk = decoder.(value, { :  });
          (chunk); 
        }
      }
      onComplete?.();
    }  {
      reader.();
    }
  }  (error) {
     (error. === ) {
      .();
      ; 
    }
    onError?.(error);
  }
}