1、fetch
来源与兼容性 浏览器原生提供的api，现代浏览器支持，但是IE浏览器不支持
请求与响应处理
- 请求体格式： 需手动设置
Content-Type，如发送 JSON 时需JSON.stringify(data)并添加headers: { 'Content-Type': 'application/json' }。 - 手动处理响应数据的转换： 例如使用
response.json()来解析JSON。对于其他格式，需要调用相应的方法（如response.text()）。 - cookie： 默认不带cookie，需手动配置 credentials:'include'。
拦截器与全局配置
- 无内置拦截器，需手动封装或使用第三方库实现类似功能。
- 全局配置需自行封装（如统一添加请求头）。
错误处理 不会拒绝HTTP错误状态（如404、500），只会在网络故障时拒绝。需要检查 response.ok 或 response.status 来判断HTTP错误。
取消请求 使用 AbortController 实现取消。
上传/下载进度监控 不支持原生进度监控，需通过读取响应流实现（较复杂）。
CSRF/XSRF 防护 需手动处理
const controller = new AbortController();
fetch(url, {signal: controller.signal}).then(res => {
if (!res.ok) throw new Error("HTTP error");
return res.json();
}).catch(err => {
if (err.name === 'AbortError') {
console.log('Request canceled');
}
else {
console.error('Error:', error);
}
});
controller.abort(); // 取消请求
使用场景：
- 对依赖体积敏感，不想引入额外依赖。
- 请求逻辑简单，无需复杂配置或拦截器。
2、axios
来源与兼容性 第三方组件库（基于XMLHttpRequest）
请求与响应处理
- 请求体格式： 自动根据数据类型设置
Content-Type（如对象默认转为 JSON）。 - 自动转换响应数据： 默认将响应体解析为JSON，但也可以处理其他格式。
- cookie： 默认带cookie： 自动发送同源请求的cookie
拦截器与全局配置
- 支持 请求/响应拦截器，方便统一处理日志、认证、错误等。
- 支持全局默认配置（如
baseURL、headers）。
错误处理 会自动拒绝HTTP错误状态（非2xx的状态码）,如 404、500 均会触发 catch。
取消请求 使用 AbortController 实现取消。
上传/下载进度监控 支持 onUploadProgress 和 onDownloadProgress 回调。
CSRF/XSRF 防护 内置支持 XSRF Token 配置。
const controller = new AbortController();
axios.get(url, {signal: controller.signal}).then(res => {
console.log(res.data)
}).catch(err => {
if (axios.isCancel(err)) {
console.log('Request canceled');
} else {
console.error('Error:', error);
}
});
// 取消请求
controller.abort();
使用场景：
- 需要拦截器、取消请求、超时等高级功能。
- 项目跨浏览器和 Node.js 环境。
- 希望简洁的 API 和自动错误处理。
