fetch的基本语法

fetch是现代浏览器提供的一种用于替代XMLHttpRequest（XHR）的原生JavaScript API，用于在Web应用中发起网络请求到服务器。fetch的基本语法如下：

fetch(url, [options])
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

这里的`url`是一个字符串，表示你想要从网络获取资源的地址。`options`是一个可选的参数，它是一个对象，包含了如方法（method）、头部（headers）、请求体（body）等HTTP请求的详细配置。

- `method`：请求使用的方法，如 'GET'、'POST'。
- `headers`：请求头，可以包含许多信息，如内容类型（Content-Type）。
- `body`：请求的主体内容，可以是Blob、BufferSource、FormData、URLSearchParams或USVString对象。

`fetch`函数返回一个Promise，该Promise解析为一个`Response`对象，该对象代表了对请求的响应。你可以使用`.json()`、`.text()`等方法来处理响应内容。如果请求失败（例如网络问题），Promise会被拒绝，你可以使用`.catch()`来处理错误。

以下是几个示例的使用场景：

// 发起GET请求
fetch('https://example.com/api/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

// 发起POST请求，携带JSON格式的数据
fetch('https://example.com/api/submit', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({key: 'value'})
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));

// 使用credentials选项处理跨域请求
fetch('https://example.com/api/cookie', {
  credentials: 'include' // 'same-origin' 或 'omit'
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));