如何在 vue3 应用程序中使用 fetch 和 getReader 捕获 GPT 聊天机器人流期间未捕获的 TypeError

Question

我正在使用 Vue3 组合 API 构建一个聊天机器人客户端。我有一个 fastapi 后端 post 端点，它返回 StreamingResponse。在 UI 上，我通过 getReader 方法使用获取请求：https://developer.mozilla.org/en-US/docs/Web/API/ReadableStream/getReader

try {
  fetch('api...', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: jsonPrompt
  })
  .then(response => {
    if (!response.ok || !response.body) {
      return;
    }
  
    const reader = response.body.getReader();
  
    reader.read().then(function processText({ done, value }) {
      if (done) {
        console.log('Stream done');
        return;
      }
    
      const decodedData = new TextDecoder('utf-8').decode(value);
      console.log('decodedData:', decodedData);
      //processStream(decodedData);
    
      return reader.read().then(processText);
    })
  })
  .catch(error => {
    console.error('Error in promise:', error);
  });
}
catch (error) {
  console.error('Error:', error);
}

偶尔，我会收到 TypeError: 网络错误，在流启动之后、完成标志返回 true 之前，响应状态为 200!?

net::ERR_HTTP2_PROTOCOL_ERROR 200 (OK)

我在 fetch 周围添加的

try catch

没有捕获此错误：

知道如何在处理 getReader 的块期间捕获此错误吗？

Answer 1

如果网络在中流完成，即在发送标头之后（因此

fetch

返回已履行的承诺），则可能会发生这种情况。由于您不

await

reader.read()

，它只会返回被拒绝的承诺而不是抛出。参见例如异步编程。

但是如果我是你，我只会使用 fetch-event-stream （或者至少看看它是如何实现的）。