axios和fetch的对比

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：轻量、现代，适合简单场景或对包大小敏感的项目。

根据项目需求选择合适的工具。