axios和fetch

用户4081281200381
1 阅读3分钟

一、核心概念与定位

  • axios：基于Promise的HTTP客户端库，可在浏览器和Node.js中使用，封装了XMLHttpRequest（XHR）和Node的http模块。
  • fetch：浏览器原生API（部分环境需polyfill），基于Promise设计，是现代Web标准的网络请求方案。

二、核心差异对比表

维度axiosfetch
本质第三方库（需手动引入）浏览器原生API（部分需polyfill）
基础API设计基于XHR封装，API更易用遵循Web标准，API更底层
默认请求行为自动携带cookie需显式设置credentials: 'include'
错误处理请求失败时直接reject Promise仅当网络错误时reject，HTTP错误仍resolve
数据流处理直接返回JSON/文本等数据返回Response对象，需手动解析（.json(), .text()）
取消请求支持CancelToken或AbortController需使用AbortController（fetch原生支持）
浏览器兼容性IE11+，现代浏览器全支持不支持IE，需polyfill（如whatwg-fetch）
Node.js支持原生支持需第三方库（如node-fetch）

三、关键特性与使用场景

1. axios的核心优势
  • 易用性：封装了请求/响应拦截器、自动转换JSON数据，适合快速开发。 
    // 拦截器示例
axios.interceptors.request.use(
  config => { config.headers.token = localStorage.getItem('token'); return config; },
  error => Promise.reject(error)
);
  • 浏览器与Node通用：一套代码同时运行在前端和后端（如SSR场景）。
  • 便捷的取消请求： 
    const source = axios.CancelToken.source();
axios.get('/api/data', { cancelToken: source.token })
source.cancel('请求已取消');
2. fetch的核心优势
  • 遵循Web标准：是Service Worker、Cache API等现代Web技术的基础。
  • 更底层的控制：返回的Response对象支持流式处理（适合大文件传输）。 
    // 流式读取响应数据
fetch('/large-file').then(res => {
  const reader = res.body.getReader();
  // 处理流式数据...
});
  • 更简洁的API：使用链式调用，避免嵌套回调。 
    fetch('/api/user', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ name: 'test' }),
  credentials: 'include'  // 显式携带cookie
})
.then(res => res.json())
.then(data => console.log(data));

四、问题

1. 问：fetch如何处理错误？
  • 答：
    fetch仅在网络错误（如断网）时reject，HTTP错误（如404）仍会resolve。需手动判断状态码： 
    fetch('/api').then(res => {
  if (!res.ok) {
    throw new Error(`HTTP错误：${res.status}`);
  }
  return res.json();
});
2. 问：axios和fetch如何处理跨域？
  • 答：
    • axios：与XHR一致，依赖后端设置Access-Control-Allow-Origin。
    • fetch：同上，但需注意credentials设置（如跨域携带cookie时，origin需精确匹配）。
3. 问：为何fetch不自动携带cookie？
  • 答：
    这是出于安全考虑（防止CSRF攻击）。若需携带，需显式设置credentials: 'include'，且服务端需设置Access-Control-Allow-Credentials: true。

五、选型建议与总结话术

  • 选axios的场景：
    • 项目需兼容IE或需要Node.js环境。
    • 需要便捷的拦截器、自动转换数据格式。
  • 选fetch的场景：
    • 纯浏览器环境，且无需兼容IE。
    • 需要流式处理数据或结合Service Worker实现缓存。

总结：
“axios是封装完善的HTTP库，适合快速开发和多环境适配，提供了拦截器、取消请求等便捷功能；fetch是浏览器原生API，遵循Web标准，适合现代项目，需手动处理错误和cookie，但更适合流式数据处理和与Service Worker等技术集成。实际开发中可根据兼容性、项目需求和生态选择，或用axios封装fetch以兼顾两者优势。”

avatar
文章
阅读
粉丝