让chartGPT带我们学前端请求Fetch（3）这是关于Fetch API的常用选项的说明和示例： method（方法

这是关于Fetch API的常用选项的说明和示例：

method（方法）：
- method选项指定请求的HTTP方法，可以是GET、POST、PUT、DELETE等。
- 默认值为GET。

示例：

fetch('https://example.com/api/data', {
  method: 'POST', // 发起POST请求
  body: JSON.stringify({ name: 'John', age: 30 }), // 请求体数据
})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

mode（模式）：
- mode选项定义了请求的跨域行为。
- cors表示启用跨域资源共享，当请求跨域时，会在请求头中包含Origin字段，并允许服务器响应。
- no-cors表示禁用跨域资源共享，请求不会发送Origin字段，并且只能获取到部分响应信息（如响应头），无法访问响应体内容。
- same-origin表示仅允许请求同源资源，即请求和目标URL必须具有相同的协议、域名和端口。
- 默认值为cors。

示例：

fetch('https://example.com/api/data', {
  method: 'GET',
  mode: 'cors', // 启用跨域资源共享
})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

cache（缓存）：
- cache选项指定了请求和响应的缓存行为。
- no-cache表示不使用缓存，每次都发送请求。
- reload表示强制从服务器重新获取资源。
- force-cache表示始终使用缓存，即使缓存已经过期。
- only-if-cached表示仅在缓存命中时才返回响应。
- 默认值为default。

示例：

fetch('https://example.com/api/data', {
  method: 'GET',
  cache: 'no-cache', // 不使用缓存
})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

credentials（凭证）：
- credentials选项指定了请求是否应该包括凭据，如cookie、HTTP认证或TLS客户端证书等。
- same-origin表示仅在同源请求中包括凭据。
- include表示始终包括凭据。
- omit表示从不包括凭据。
- 默认值为omit。

示例：

fetch('https://example.com/api/data', {
  method: 'GET',
  credentials: 'include', // 始终包括凭据
})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

headers（请求头）：
- headers选项指定了请求头信息。
- 可以设置多个请求头，如Content-Type、Authorization等。

示例：

fetch('https://example.com/api/data', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer jwt-token'
  },
  body: JSON.stringify({ name: 'John', age: 30 }),
})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

redirect（重定向）：
- redirect选项指定了重定向的行为。
- follow表示自动重定向，即遇到3xx响应时自动跳转。
- error表示不允许重定向，遇到3xx响应时会抛出异常。
- manual表示手动重定向，需要调用Response.redirect()方法进行跳转。
- 默认值为follow。

示例：

fetch('https://example.com/api/data', {
  method: 'GET',
  redirect: 'follow', // 自动重定向
})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

referrerPolicy（引用策略）：
- referrerPolicy选项指定了请求的Referer头信息的发送策略。
- no-referrer表示不发送Referer头信息。
- client表示仅在同源请求中发送完整的URL，否则只发送路径部分。
- 默认值为no-referrer。

示例：

fetch('https://example.com/api/data', {
  method: 'GET',
  referrerPolicy: 'no-referrer', // 不发送Referer头信息
})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

body（请求体）：
- body选项指定了请求体数据，用于POST、PUT等请求。
- 可以是一个Blob、BufferSource、FormData、URLSearchParams、ReadableStream或字符串。
- 如果是字符串，需要设置合适的Content-Type头信息。

示例：

fetch('https://example.com/api/data', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ name: 'John', age: 30 }), // 请求体数据
})
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

以上是关于Fetch API常用选项的说明和示例。