ChatGPT前端集成实战：从API调用到性能优化的完整指南

1次阅读

共计 2005 个字符，预计需要花费 6 分钟才能阅读完成。

前端集成 ChatGPT 时，最大的挑战在于平衡实时交互体验与复杂的长文本处理能力。不同技术方案的选择会直接影响用户感知延迟和系统资源消耗效率。

方案类型	平均延迟	兼容性	开发成本	适用场景
REST API	高	所有浏览器	低	简单问答、非实时场景
WebSocket	极低	IE10+	中	高频双向交互
SSE	低	除 IE 外主流	中	服务器推送流式数据

/**
 * 带自动重试的 API 请求封装
 * @param {string} prompt - 用户输入内容
 * @param {number} retries - 最大重试次数
 */
async function fetchChatCompletion(prompt, retries = 3) {
  try {const response = await axios.post('/api/chat', { prompt}, {
      timeout: 10000,
      headers: {'Content-Type': 'application/json'}
    });
    return response.data;
  } catch (error) {if (retries > 0 && !error.response?.status?.toString().startsWith('4')) {await new Promise(res => setTimeout(res, 1000 * (4 - retries)));
      return fetchChatCompletion(prompt, retries - 1);
    }
    throw new Error(` 请求失败: ${error.message}`);
  }
}

function useChatGPT() {const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);

  const sendMessage = useMemo(() => debounce(async (message) => {setLoading(true);
    try {const response = await fetchChatCompletion(message);
      return response;
    } catch (err) {setError(err);
      return null;
    } finally {setLoading(false);
    }
  }, 300), []);

  return {sendMessage, loading, error};
}

<script setup>
import {ref} from 'vue';

const chunks = ref('');

async function streamResponse(prompt) {const eventSource = new EventSource(`/api/stream?prompt=${encodeURIComponent(prompt)}`);

  eventSource.onmessage = (event) => {chunks.value += event.data;};

  eventSource.onerror = () => {eventSource.close();
  };
}
</script>

Token 分块处理
使用 tiktoken 库预计算 token 数量
超过阈值时自动拆分请求
前端实现分块 loading 动画
内存管理策略
对话历史采用 LRU 缓存
超过 100 条自动归档
大文本内容虚拟滚动渲染

请求中断控制

const controller = new AbortController();

fetch('/api/chat', {signal: controller.signal}).catch(e => {if (e.name === 'AbortError') {console.log('请求已取消');
  }
});

// 需要取消时调用
controller.abort();