Fetch知识体系（二）

Fetch知识体系（一）https://blog.youkuaiyun.com/askscl/article/details/136156631

四、Request对象

1. 创建Request 对象

   1. const r = new Request(url, init)

2. 克隆Request 对象

   1. 使用构造函数
      1. 再次传入init对象，会覆盖对象中同名的值
      2. 第一个请求体会被标记为‘已使用’
      3. 如果源对象与创建的新对象不同源，则 referrer 属性会被清除。
      4. 此外，如果源对象的 mode 为navigate ，则会被转换为 same-origin 。
   2. 使用clone()
      1. 任何值都不会被覆盖
      2. 不会将任何请求的请求体标记为“已使用”
   3. 注意事项：
      1. 如果请求对象的 bodyUsed 属性为 true （即请求体已被读取），
         1. 那么上述任何一种方式都不能用来创建这个对象的副本。在请求体被读取之后再克隆会导致抛出 TypeError 。

3. 在 fetch() 中使用 Request 对象

   1. 不能拿请求体已经用过的Request 对象来发送请求
   2. 有请求体的Request对象只能在fetch中使用一次
   3. 想多次使用Request对象，在Request使用前，可以使用克隆的对象

五、Response对象

1. 创建Response 对象

   1. 两个可选参数
      1. const r = new Response(body, init);
   2. 两个静态方法
      1. Response.redirect()
      2. Response.error()

2. 读取响应状态信息

3. 克隆 Response 对象（与Request规则类似）

   1. 使用clone()
   2. 注意事项
      1. 如果响应对象的 bodyUsed 属性为 true （即响应体已被读取），
         1. 则不能再创建这个对象的副本。在响应体被读取之后再克隆会导致抛出 TypeError 。
      2. 有响应体的 Response 对象只能读取一次。（不包含响应体的 Response 对象不受此限制。）
      3. 要多次读取包含响应体的同一个 Response 对象，必须在第一次读取前调用 clone()
      4. 通过创建带有原始响应体的 Response 实例，可以执行伪克隆操作。
         1. 关键是这样不会把第一个 Response 实例标记为已读，而是会在两个响应之间共享

六、Request 、 Response 及 Body 混入

1. Body混入提供了5个方法

   1. Body.text()
   2. Body.json()
   3. Body.formData()
      1. append(键，值)
      2. get(键)
   4. Body.arrayBuffer()
      1. (buf) => new Int8Array(buf)
   5. Body.blob()

2. 一次性流：

   1. body被使用一次就会上锁，表现为bodyUsed: false
   2. 构建在ReadableStream 之上

3. 使用 ReadableStream 主体：

   1. 目的：实时读取和操作数据
   2. body.getReader()
      1. read()
      2. releaseLock()
   3. TextDecoder()
      1. decode(chunk, { stream: true})
   4. 双流技术
      1. 第一个流： body.getReader()
      2. 第二个流：new ReadableSteam()
      3. 作用：实时检查和操作流的内容

fetch存在问题

1. fetch是一个低层次的API，你可以把它考虑成原生的XHR，所以使用起来并不是那么舒服，需要进行封装。
2. fetch只对网络请求报错，对400，500都当做成功的请求，服务器返回 400，500 错误码时并不会 reject，只有网络错误这些导致请求不能完成时，fetch 才会被 reject。
3. fetch默认不会带cookie，需要添加配置项： fetch(url, {credentials: ‘include’})
4. fetch没有办法原生监测请求的进度，而XHR可以

七、问答：

1. for  await of?

   1. 在for of里，有异步值

2. 为什么要引入流的概念？

   1. 有效载荷的大小可能会导致网络延迟
   2. 流API在处理 有效载荷方面有优势

3. 缓冲区是什么？

   1. 将流转存到缓冲区的内存里
   2. 将缓冲区转换成某种js对象类型
      1. 通过期约产生结果
      2. 期约会等待主体流报告完成及缓冲被解析
   3. 客户端必须等待响应的资源完全加载才能访问其内容

4. 管道是什么？

   1. 用于导入另一个流

5. fetch发送2次请求的原因？

   1. 条件：
      1. 跨域
      2. 使用消息格式： application/json
   2. 原因：
      1. 使用了带 预检(Preflighted)的跨域请求。该请求会在发送真实的请求之前发送一个类型为 OPTIONS的预检请求。
         1. 预检请求会 检测服务器是否有需要的跨域资源，有的话才会发送真实的请求。
            1. 例子
               1. 当我们在请求头部增加了authorization项，
               2. 那么在服务器响应头中需要放入Access-Control-Allow-Headers，并且其值中必须要包含authorization，
               3. 否则OPTIONS预检会失败，从而导致不会发送真实的请求。
      2. fetch第一次发送option类型的请求，这个请求主要是用来 询问服务器是否允许修改header头等一些操作 ，
         1. 如果允许会返回204（服务器成功处理了请求，但没有返回任何内容），然后再发送真正的post请求拿回数据。