如何在按钮触发后将curl API返回的实时流持续填充到HTML文本框

首先明确：浏览器页面无法直接调用本地的curl命令，因为curl是操作系统层面的命令行工具，前端JS没有权限触发本地命令执行。
你使用的接口返回的data: 具体内容格式，本身就是标准的HTTP流式返回格式，完全可以通过浏览器原生的Fetch API流读取能力实现和curl一致的实时输出效果，全程不需要WebSocket。

实现逻辑梳理 #

整个流程和你在命令行跑curl <api_endpoint>的行为完全对齐：

• 发起HTTP请求后不等待全部内容返回，持续读取接口逐片推送的内容
• 逐行解析返回内容，去掉每行开头的data: 前缀提取实际业务值
• 每解析到一个有效内容就实时追加到文本框中，自动滚动到底部展示最新内容

完整可运行代码 #

修正了你原有代码中按钮重复绑定事件的问题，直接替换API地址就能用：

<html>
  <textarea rows="14" id="value" placeholder="接口返回的实时流内容会展示在这里"></textarea>
  <button class="get_values">GET</button>
</html>

<script>
const textareaEl = document.getElementById('value');
const getButton = document.querySelector('.get_values');

getButton.addEventListener('click', async function() {
  // 清空文本框上次的内容
  textareaEl.value = '';
  // 替换为你的实际API地址
  const apiEndpoint = '<你的实际API接口地址>';

  try {
    const response = await fetch(apiEndpoint);
    const reader = response.body.getReader();
    // 适配中文的文本解码器
    const decoder = new TextDecoder('utf-8');
    // 缓存分片内容，解决跨分片的行截断问题
    let contentBuffer = '';

    // 循环持续读取流内容直到接口关闭连接
    while (true) {
      const { done, value } = await reader.read();
      if (done) break;

      // 拼接当前分片内容到缓存
      contentBuffer += decoder.decode(value, { stream: true });
      // 按换行拆分完整行，最后不完整的片段留到缓存等下次拼接
      const allLines = contentBuffer.split('\n');
      contentBuffer = allLines.pop();

      // 逐行处理有效内容
      for (const line of allLines) {
        if (!line.trim()) continue;
        // 匹配data:开头的行，提取实际值
        const contentMatch = line.match(/^data:\s*(.*)$/);
        if (contentMatch) {
          const realContent = contentMatch[1];
          // 追加内容到文本框，自动滚动到底部
          textareaEl.value += realContent + '\n';
          textareaEl.scrollTop = textareaEl.scrollHeight;
        }
      }
    }
  } catch (error) {
    textareaEl.value = `请求异常：${error.message}`;
  }
});
</script>

关键注意点 #

• 跨域问题：前端直接调用接口时，需要API端配置允许对应前端页面域名的跨域响应头，否则浏览器会拦截请求
• 为什么不用专门的SSE EventSource接口：EventSource虽然是原生支持的SSE API，但不支持自定义请求头、不支持POST请求，Fetch流读取的方式灵活性更高，行为和你命令行跑curl完全一致
• 分片拼接逻辑的必要性：网络传输中流式返回的内容可能被拆成多个小分片，某一行内容可能刚好跨两个分片，不做缓存拼接会出现内容截断、错乱的问题

内容的提问来源于stack exchange，提问作者Medita Inc.