因为fetch中的response属性我卡了半天fetch中的response，在使用 fetch API 进行网络请求

~~很不幸，当你手中有一个屎山项目时，你只能屎上堆屎......~~

同一个接口，多传一个请求头参数前端就会报错，而为了完成需求，这个参数又必须传。返回值如下：

不管是否传值，返回的值都是一样的，catch一下错误：

json格式化失败，接口是用fetch请求的，既然返回值都一样，为什么一个成功一个失败呢？于是我在屎山里扒啊扒...... 终于,在一个不起眼的角落里,初见端倪

没错，两次请求的response里的header不一样，这个header里究竟有什么？打印一下

直接打是个空对象，嗯？不可能什么都没有吧，那怎么一次能读到里面的contentType,一次不能呢？百度一下，使用迭代的方法打印

终于看到庐山真面目了

两次请求接口的区别就在于，一次请求返回的请求头有contentType，一次没有！后端同学怎么回事？

不行，让他塞一下！ fetch中的response究竟是个啥呢？KIMI一下

在使用 fetch API 进行网络请求时，response 是一个非常重要的对象，它包含了服务器返回的所有信息。

status：
- 类型：number
- 描述：HTTP 状态码，例如 200 表示成功，404 表示未找到，500 表示服务器错误等。
- 示例：response.status 返回 200
statusText：
- 类型：string
- 描述：HTTP 状态码的文本描述，例如 "OK"、"Not Found"、"Internal Server Error" 等。
- 示例：response.statusText 返回 "OK"
ok：
- 类型：boolean
- 描述：如果状态码在 200-299 之间，返回 true，否则返回 false。
- 示例：response.ok 返回 true 或 false
type：
- 类型：string
- 描述：响应的类型，可能的值有 "basic"、"cors"、"default"、"error"、"opaque" 等。
- 示例：response.type 返回 "basic"
url：
- 类型：string
- 描述：响应的 URL。
- 示例：response.url 返回 "https://api.example.com/data"
headers：
- 类型：Headers
- 描述：一个 Headers 对象，包含响应的 HTTP 头信息。
- 示例：response.headers.get('Content-Type') 返回 "application/json"
body：
- 类型：ReadableStream
- 描述：响应的主体内容，是一个可读流。
- 示例：response.body 返回一个 ReadableStream 对象

arrayBuffer() ：
- 返回值：Promise<ArrayBuffer>
- 描述：将响应体转换为 ArrayBuffer。
- 示例：
```
javascript
response.arrayBuffer().then(arrayBuffer => {
  console.log(arrayBuffer);
});
```
blob() ：
- 返回值：Promise<Blob>
- 描述：将响应体转换为 Blob。
- 示例：
```
javascript
response.blob().then(blob => {
  console.log(blob);
});
```
json() ：
- 返回值：Promise<any>
- 描述：将响应体转换为 JSON 对象。
- 示例：
```
javascript
response.json().then(data => {
  console.log(data);
});
```
text() ：
- 返回值：Promise<string>
- 描述：将响应体转换为文本。
- 示例：
```
javascript
response.text().then(text => {
  console.log(text);
});
```
formData() ：
- 返回值：Promise<FormData>
- 描述：将响应体转换为 FormData。
- 示例：
```
javascript复制
response.formData().then(formData => {
  console.log(formData);
});
```

在 fetch API 中，Response 对象的 headers 属性是一个 Headers 对象，它是一个特殊的类，用于表示 HTTP 头信息。Headers 对象不能直接打印，因为它不是一个普通的对象，而是一个具有特定方法和行为的类。这主要是出于安全和性能考虑。

安全考虑：
- HTTP 头信息可能包含敏感信息，如认证令牌、用户代理等。直接暴露这些信息可能会导致安全问题。
- 浏览器对某些头信息进行了保护，不允许脚本直接访问，例如 Set-Cookie 和 Authorization 等。
性能考虑：
- Headers 对象是一个高效的实现，它内部使用了特定的数据结构来存储头信息。直接打印可能会导致性能问题，尤其是在头信息非常多的情况下。

虽然不能直接打印 Headers 对象，但可以使用 Headers 对象提供的方法来获取和打印特定的头信息。以下是一些常用的方法：

get(name) ：
- 参数：name（字符串）—— 要获取的头信息的名称。
- 返回值：头信息的值，如果不存在则返回 null。
- 示例：
```
javascript
const contentType = response.headers.get('Content-Type');
console.log('Content-Type:', contentType);
```
has(name) ：
- 参数：name（字符串）—— 要检查的头信息的名称。
- 返回值：布尔值，表示是否存在该头信息。
- 示例：
```
javascript
const hasContentType = response.headers.has('Content-Type');
console.log('是否存在 Content-Type:', hasContentType);
```

keys() ：

示例：

javascript
for (const key of response.headers.keys()) {
  console.log('头信息名称:', key);
}

values() ：

示例：

javascript
for (const value of response.headers.values()) {
  console.log('头信息值:', value);
}

entries() ：

示例：

javascript
for (const [key, value] of response.headers.entries()) {
  console.log('头信息名称:', key, '值:', value);
}

看来要再仔细学习一下fetch了，一个小小的response中都有这么多学问！好了，小葵花妈妈课堂下课了，我们下期再见！

因为fetch中的response属性我卡了半天