ReadableStream响应主体数据处理(截图自用)

Fetch 接口返回的是一个 Promise，解析后得到 Response 对象，包含如下重要信息：

基本信息

• type：响应类型，如 'basic'（同源请求响应） 、'cors'（跨域资源共享请求响应）等，用于标识请求来源及处理方式。
• url：本次响应对应的请求 URL，方便确认数据来源。
• redirected：布尔值，指示请求过程中是否发生过重定向。
• status：HTTP 状态码，像 200 表示成功，404 表示资源未找到等，反映请求处理结果。
• statusText：状态码对应的文本描述，如 200 对应 “OK” 。
• ok：布尔值，一般状态码在 200 - 299 范围时为 true，表示请求成功。

数据内容相关

• headers：包含响应头信息，以键值对形式存在，可获取服务器返回的元数据，如 Content-Type（标识响应体数据类型 ）、Cache-Control（缓存策略 ）等。
• body：类型为 ReadableStream，是响应的主体内容，像请求的网页 HTML 代码、API 返回的 JSON 数据等都在其中。需通过特定方法（如 text() 转文本、json() 转 JSON 对象等 ）来提取使用。

• 流式数据响应值Response 如下

• const reader = response.body!.getReader()；

const { done, value } = await reader.read()；

 console.log(done, value,'done, value');

 const decoder = new TextDecoder();

 buffer += decoder.decode(value, { stream: true });

console.log(buffer,'buffer');

 const jsonStr = line.replace(/^(?:data:\s*)+/, '').trim();

 const parsed = JSON.parse(jsonStr);

 

parsed.event === 'message'

     const startTagMatch = content.match(/<(\w+)>/);

 

watch(() => props.msg.result,(newResults: any) => {if (!newResults || !Array.isArray(newResults)) returnnewResults.forEach((result) => {content += result.answerconsole.log(content, 'content');processStreamingContent(result.answer)})debounce(() => {store.scroll2Bottom?.(true,'smooth')}, 100)()},{ immediate: true, deep: true }
)

 

  console.log(content, 'content');