fetch和axios的区别

1、fetch

来源与兼容性 浏览器原生提供的api，现代浏览器支持，但是IE浏览器不支持

请求与响应处理

• 请求体格式： 需手动设置 Content-Type，如发送 JSON 时需 JSON.stringify(data) 并添加 headers: { 'Content-Type': 'application/json' }。
• 需要手动处理JSON解析(response.json())
• 错误状态码（默认不抛出HTTP错误，如 404、500，需要检查response.ok）
• cookie： 默认不带cookie，需手动配置 credentials:'include'

拦截器与全局配置

• 无内置拦截器，需手动封装或使用第三方库实现类似功能。
• 全局配置需自行封装（如统一添加请求头）。

错误处理 仅在网络请求失败时（如断网）触发 reject，HTTP 错误状态码（如 404）不会触发 catch。

取消请求 使用 AbortController 实现取消。

上传/下载进度监控 不支持原生进度监控，需通过读取响应流实现（较复杂）。

CSRF/XSRF 防护 需手动处理

js
 体验AI代码助手
 代码解读
复制代码
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');
});

controller.abort(); // 取消请求

使用场景：

• 对依赖体积敏感，不想引入额外依赖。
• 请求逻辑简单，无需复杂配置或拦截器。

2、axios

来源与兼容性 第三方组件库（基于XMLHttpRequest）

请求与响应处理

• 请求体格式： 自动根据数据类型设置 Content-Type（如对象默认转为 JSON）。
• 自动处理JSON解析(response.data)
• 自动将非 2xx 状态码视为错误（触发 catch）
• cookie： 默认带cookie： 自动发送同源请求的cookie

拦截器与全局配置

• 支持 请求/响应拦截器，方便统一处理日志、认证、错误等。
• 支持全局默认配置（如 baseURL、headers）。

错误处理 任何 HTTP 错误状态码（如 404、500）均会触发 catch。

取消请求 使用 AbortController 实现取消。

上传/下载进度监控 支持 onUploadProgress 和 onDownloadProgress 回调。

CSRF/XSRF 防护 内置支持 XSRF Token 配置。

js
 体验AI代码助手
 代码解读
复制代码
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');
});

controller.abort();

使用场景：

• 需要拦截器、取消请求、超时等高级功能。

• 项目跨浏览器和 Node.js 环境。

• 希望简洁的 API 和自动错误处理。

作者：Ariel_jhy
链接：juejin.cn/post/751422…
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。