] LLM API调用失败: Failed to fetch [ERROR] LLM处理错误: Failed to fetch [ERROR] 错误堆栈: Ty...

2026年02月06日 11:40 状态: processing

🚨 错误信息

[ERROR] LLM API调用失败: Failed to fetch [ERROR] LLM处理错误: Failed to fetch [ERROR] 错误堆栈: TypeError: Failed to fetch at LLMClient.chatCompletion (D:\GSME\nerou\js\ai\llm-client.js:71:36) at VoiceChatFacade.sendToLLM (D:\GSME\nerou\js\ai\llm-handler.js:183:53)

🤖 AI解决方案

代码报错分析报告

错误翻译


原文:Failed to fetch
译文:获取失败
原文:TypeError: Failed to fetch
译文:类型错误:获取失败

2 原因分析

核心问题fetch API调用失败,通常是因为网络连接问题、API端点不可访问或跨域限制

具体分析

  • 错误发生在 llm-client.js 第71行的 LLMClient.chatCompletion 方法中

  • 调用路径:VoiceChatFacade.sendToLLMLLMClient.chatCompletionfetch调用失败

  • 最可能的原因:

  • 1. 后端API服务未启动或无法访问
    2. 网络连接问题(代理、防火墙、离线状态)
    3. CORS(跨域资源共享)策略阻止了请求
    4. API密钥无效或认证失败

    3.### 方案A:检查并修复网络连接


    ``javascript
    // 在llm-client.js的chatCompletion方法中添加错误处理
    async chatCompletion(prompt, options = {}) {
    try {
    const response = await fetch(this.apiEndpoint, {
    method: 'POST',
    headers: {
    'Content-Type': 'application/json',
    'Authorization':
    Bearer ${this.apiKey},
    },
    body: JSON.stringify({
    prompt: prompt,
    ...options
    })
    });

    // 检查响应状态
    if (!response.ok) {
    throw new Error(
    HTTP ${response.status}: ${response.statusText});
    }

    return await response.json();
    } catch (error) {
    // 添加详细的错误日志
    console.error('[LLM API错误详情]', {
    错误类型: error.name,
    错误信息: error.message,
    网络状态: navigator?.onLine ? '在线' : '离线',
    时间戳: new Date().toISOString()
    });

    // 返回友好的错误信息
    throw new Error(
    LLM服务调用失败:${error.message});
    }
    }

    方案B:添加网络状态检查


    javascript
    // 在发送请求前检查网络状态
    async sendToLLM(message) {
    // 检查网络连接
    if (typeof navigator !== 'undefined' && !navigator.onLine) {
    throw new Error('网络连接已断开,请检查您的网络连接');
    }

    // 检查API端点是否可达
    try {
    await this.checkEndpointAvailability();
    } catch (error) {
    throw new Error('LLM服务不可用:' + error.message);
    }

    // 继续原来的调用
    return await this.llmClient.chatCompletion(message);
    }

    方案C:添加API端点可达性测试方法


    javascript
    class LLMClient {
    // ... 其他代码 ...

    async checkEndpointAvailability() {
    try {
    const controller = new AbortController();
    const timeoutId = setTimeout(() => controller.abort(), 5000);

    const response = await fetch(
    ${this.apiEndpoint}/health, {
    method: 'GET',
    signal: controller.signal
    });

    clearTimeout(timeoutId);
    return response.ok;
    } catch (error) {
    console.warn('API端点健康检查失败:', error);
    return false;
    }
    }
    }

    4. 预防措施

    最佳实践建议

  • 添加网络状态监控:在应用启动时检查网络状态,并在网络变化时提示用户

  • javascript
    // 监听网络状态变化
    window.addEventListener('online', () => console.log('网络已连接'));
    window.addEventListener('offline', () => console.error('网络已断开'));

  • 实现重试机制:对于网络请求失败的情况,实现指数退避重试策略

  • javascript
    async function fetchWithRetry(url, options, maxRetries = 3) {
    for (let i = 0; i < maxRetries; i++) {
    try {
    return await fetch(url, options);
    } catch (error) {
    if (i === maxRetries - 1) throw error;
    await new Promise(resolve => setTimeout(resolve, 1000 * Math.pow(2, i)));
    }
    }
    }
    ``

    ️ 调试工具推荐

  • 使用浏览器开发者工具的 Network 面板检查请求详情

  • 安装 PostmanInsomnia 单独测试API端点

  • 使用 FiddlerCharles Proxy 监控网络请求
  • ---


  • 确认后端LLM服务正在运行

  • 检查浏览器控制台的Network面板查看详细错误

  • 验证API密钥和端点URL配置是否正确