javascript基础从小白到高手系列一千二十二：Request、Response 及Body 混入

完美句号

于 2024-05-23 11:08:23 发布

阅读量260

点赞数 5

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/wanmeijuhao/article/details/139142323

版权

Request 和Response 都使用了Fetch API 的Body 混入，以实现两者承担有效载荷的能力。这个
混入为两个类型提供了只读的body 属性（实现为ReadableStream）、只读的bodyUsed 布尔值（表
示body 流是否已读）和一组方法，用于从流中读取内容并将结果转换为某种JavaScript 对象类型。
通常，将Request 和Response 主体作为流来使用主要有两个原因。一个原因是有效载荷的大小
可能会导致网络延迟，另一个原因是流API 本身在处理有效载荷方面是有优势的。除此之外，最好是一次性获取资源主体。
Body 混入提供了5 个方法，用于将ReadableStream 转存到缓冲区的内存里，将缓冲区转换为某
种JavaScript 对象类型，以及通过期约来产生结果。在解决之前，期约会等待主体流报告完成及缓冲被
解析。这意味着客户端必须等待响应的资源完全加载才能访问其内容。

Body.text()
Body.text()方法返回期约，解决为将缓冲区转存得到的UTF-8 格式字符串。下面的代码展示了
在Response 对象上使用Body.text()：
fetch(‘https://foo.com’)
.then((response) => response.text())
.then(console.log);
// <!doctype html>
//
//
// …
以下代码展示了在Request 对象上使用Body.text()：
let request = new Request(‘https://foo.com’,
{ method: ‘POST’, body: ‘barbazqux’ });
request.text()
.then(console.log);
// barbazqux
Body.json()
Body.json()方法返回期约，解决为将缓冲区转存得到的JSON。下面的代码展示了在Response
对象上使用Body.json()：
fetch(‘https://foo.com/foo.json’)
.then((response) => response.json())
.then(console.log);
// {“foo”: “bar”}
以下代码展示了在Request 对象上使用Body.json()：
let request = new Request(‘https://foo.com’,
{ method:‘POST’, body: JSON.stringify({ bar: ‘baz’ }) });
request.json()
.then(console.log);
// {bar: ‘baz’}
Body.formData()
浏览器可以将FormData 对象序列化/反序列化为主体。例如，下面这个FormData 实例：
let myFormData = new FormData();
myFormData.append(‘foo’, ‘bar’);
在通过HTTP 传送时，WebKit 浏览器会将其序列化为下列内容：
------WebKitFormBoundarydR9Q2kOzE6nbN7eR
Content-Disposition: form-data; name=“foo”
bar
------WebKitFormBoundarydR9Q2kOzE6nbN7eR–
Body.formData()方法返回期约，解决为将缓冲区转存得到的FormData 实例。下面的代码展示
了在Response 对象上使用Body.formData()：
fetch(‘https://foo.com/form-data’)
.then((response) => response.formData())
.then((formData) => console.log(formData.get(‘foo’));
// bar
以下代码展示了在Request 对象上使用Body.formData()：
let myFormData = new FormData();
myFormData.append(‘foo’, ‘bar’);
let request = new Request(‘https://foo.com’,
{ method:‘POST’, body: myFormData });
request.formData()
.then((formData) => console.log(formData.get(‘foo’));
// bar

完美句号

关注

5
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
javascript基础从小白到高手系列一千二十二：Request、Response 及Body 混入

Request 和Response 都使用了Fetch API 的Body 混入，以实现两者承担有效载荷的能力。可能会导致网络延迟，另一个原因是流API 本身在处理有效载荷方面是有优势的。Body 混入提供了5 个方法，用于将ReadableStream 转存到缓冲区的内存里，将缓冲区转换为某。示body 流是否已读）和一组方法，用于从流中读取内容并将结果转换为某种JavaScript 对象类型。通常，将Request 和Response 主体作为流来使用主要有两个原因。一个原因是有效载荷的大小。
复制链接

扫一扫