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'