fetch 使用
约 577 字大约 2 分钟
2025-01-23
Fetch API 是 XMLHttpRequest API 的更灵活、更强大的替代品。Fetch API 使用 Promise 而不是事件来处理异步响应，与 Service Worker 很好地集成，并支持 HTTP 的高级方面，例如 CORS。由于这些原因，现代 Web 应用程序中通常使用 Fetch API 而不是 XMLHttpRequest。
使用
基本使用
const url = ''
fetch(url, {
method: 'GET', // 请求方式
headers: {
'Content-Type': 'application/json'
}
})
.then(response => {
if (!response.ok) {
throw new Error(`HTTP error! Status: ${response.status}`);
}
return response.json(); // 解析 JSON
})
.then(data => {
console.log('Success:', data);
})
.catch(error => {
console.error('Fetch error:', error);
});fetch 超时处理
fetch 默认没有超时，需手动实现。这相对于其他库来说，fetch 的超时处理显得有些麻烦。可以借助 Promise.race 来实现。
const url = '';
const controller = new AbortController();
const timeout = setTimeout(() => controller.abort(), 5000);
fetch(url, { signal: controller.signal })
.then(response => response.json())
.then(data => console.log(data))
.catch(err => console.error('Fetch error:', err));fetch 与 jQuery.ajax() 对比
| 特性 | fetch | jQuery.ajax() |
|---|---|---|
| 是否原生支持 | 原生支持（现代浏览器） | 依赖 jQuery 库 |
| 语法 | Promise + async/await | 回调函数（支持 Promise） |
| 超时处理 | 不支持，需要手动实现 | 内置 timeout 选项 |
| 数据自动转换 | 需手动调用 .json() | 自动转换 json、xml、html |
| 进度监控 | 需使用 XHR 配合 | 内置进度回调 |
| 错误处理 | 需手动处理 HTTP 错误状态 | 内置错误回调 |
| 请求取消 | AbortController | jqXHR.abort() |
| 跨域请求 | 受 CORS 限制 | JSONP 方式支持跨域（有限度） |
| 浏览器兼容性 | IE 不支持（需 polyfill） | 兼容性更好（IE9+） |
| 依赖性 | 无 | 依赖 jQuery 库 |
fetch对比jQuery.ajax()有如下不同
- 当接收到一个代表错误的 HTTP 状态码时，从 fetch() 返回的 Promise 不会被标记为 reject，即使响应的 HTTP 状态码是 404 或 500。相反，它会将 Promise 状态标记为 resolve（如果响应的 HTTP 状态码不在 200 - 299 的范围内，则设置 resolve 返回值的 ok 属性为 false），仅当网络故障时或请求被阻止时，才会标记为 reject。
- fetch 不会发送跨域 cookie，除非你使用了 credentials 的初始化选项。（自 2018 年 8 月以后，默认的 credentials 政策变更为 same-origin。Firefox 也在 61.0b13 版本中进行了修改）