【fetch】

JavaScript 中的 fetch() 是一个现代的网络请求接口，用于异步地获取资源，替代传统的 XMLHttpRequest，基于 Promise，语法简洁，易于使用和扩展。

基本用法

fetch(url)
  .then(response => response.json())  // 解析响应为 JSON
  .then(data => console.log(data))    // 处理数据
  .catch(error => console.error('Error:', error));  // 错误处理

• fetch() 接受一个必需的参数 URL 字符串，表示请求的资源地址。
• 返回一个 Promise，成功时返回一个 Response 对象。
• Response 对象提供多种方法读取响应体，如 .json()、.text()、.blob() 等，这些方法都返回 Promise。
• 只有在网络错误时才会进入 .catch()，HTTP 状态码错误（如 404）不会触发错误，需要手动检查 response.ok 或 response.status。

使用 async/await 写法

async function getData() {
  try {
    let response = await fetch(url);
    if (!response.ok) throw new Error('HTTP error ' + response.status);
    let data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('Request Failed', error);
  }
}

定制请求（第二个参数）

fetch() 还可以接受第二个参数 options，是一个配置对象，用于定制 HTTP 请求：

• method：请求方法，如 'GET'（默认）、'POST'、'PUT'、'DELETE' 等。
• headers：请求头对象，如 { 'Content-Type': 'application/json' }。
• body：请求体，通常用于 POST 或 PUT 请求，可以是字符串、FormData、URLSearchParams 等。
• mode：请求模式，如 'cors'、'no-cors'、'same-origin'。
• credentials：是否携带凭据，如 'include'、'omit'、'same-origin'。

POST 请求示例

fetch(url, {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json;charset=UTF-8'
  },
  body: JSON.stringify({ foo: 'bar' })
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));

其他说明

• fetch() 的请求和响应均基于流（Stream）处理，支持分块读取大文件。
• 可以通过 Request 和 Headers 构造函数创建自定义请求对象传给 fetch()。
• 对于跨域请求，可以通过设置 mode: 'cors' 和相关 CORS 头来控制。
• 浏览器自动管理某些请求头（如 Content-Length、Cookie），无法手动设置。

---

综上，fetch() 是现代浏览器中推荐的网络请求方式，支持 Promise，语法简洁，支持各种 HTTP 请求定制，适合处理 JSON、文本、二进制等多种数据格式，代码示例如下：

// GET 请求
fetch('https://api.example.com/data')
  .then(response => {
    if (!response.ok) throw new Error('Network response was not ok');
    return response.json();
  })
  .then(data => console.log(data))
  .catch(error => console.error('Fetch error:', error));

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

以上内容参考了 MDN、阮一峰等多方权威资料[1][2][3][4][5][6][7][8][9]。

[1] https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API/Using_Fetch
[2] https://www.ruanyifeng.com/blog/2020/12/fetch-tutorial.html
[3] https://blog.csdn.net/weixin_52148548/article/details/124703828
[4] http://www.runoob.com/ajax/fetch-api.html
[5] https://www.cnblogs.com/z5337/p/18683679
[6] https://www.oxxostudio.tw/articles/201908/js-fetch.html
[7] https://juejin.cn/post/6868138631714848775
[8] https://zh.javascript.info/fetch
[9] https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API