网站建设开发兴田德润成都广告设计
axios 和 fetch 是用于发起 HTTP 请求的两种常见工具，它们的主要区别如下：
1. 浏览器兼容性
- axios：基于
XMLHttpRequest，兼容性较好，支持较旧的浏览器（如 IE11）。 - fetch：现代浏览器原生支持，但不兼容 IE 等旧浏览器，可能需要 polyfill。
2. API 设计
- axios：API 设计简洁，支持链式调用，使用 Promise，提供便捷的请求和响应拦截器。
- fetch：API 较底层，返回 Promise，但需要手动处理 JSON 转换和状态码检查。
3. 请求和响应处理
- axios：自动转换 JSON 数据，响应数据在
data属性中，提供请求和响应拦截器。 - fetch：需手动调用
.json()方法解析 JSON，且不会自动处理错误状态码（如 404、500）。
4. 错误处理
- axios：HTTP 错误状态码（如 404、500）会触发
catch，便于统一处理。 - fetch：仅在网络故障时触发
catch，HTTP 错误状态码需手动处理。
5. 取消请求
- axios：支持通过
CancelToken或AbortController取消请求。 - fetch：仅支持
AbortController取消请求。
6. 进度监控
- axios：支持上传和下载进度监控。
- fetch：不直接支持进度监控，需通过其他方式实现。
7. 体积
- axios：体积较大（约 13KB）。
- fetch：原生支持，无需额外引入。
示例代码
axios
axios.get('https://api.example.com/data').then(response => console.log(response.data)).catch(error => console.error(error));
fetch
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(error));
总结
- axios：功能丰富，使用方便，适合复杂场景。
- fetch：轻量、现代，适合简单场景或对包大小敏感的项目。
根据项目需求选择合适的工具。