语法差异
fetch('https://example.com/api/data')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));
- 它返回一个
Response对象，需要进一步处理（如.json()、.text()、.blob()等）来获取实际数据。
- axios：
- 语法更简洁直观，支持多种请求方法，如
axios.get、axios.post等。例如：
axios.get('https://example.com/api/data')
.then(response => console.log(response.data))
.catch(error => console.error('Error:', error));
- 直接返回解析后的数据（如
response.data），无需额外处理步骤来解析常见格式（如JSON）。
特性差异
- fetch：
- 是浏览器原生API，无需额外引入库，这在一定程度上可以减少项目的依赖。
- 对请求和响应的控制粒度更细，例如可以自定义
Request对象的各种属性，如headers、method、body等。但默认情况下，fetch不会发送跨域的Cookie，需要设置credentials: 'include'。
- 不支持自动转换请求和响应数据，需要手动处理，如将
Response对象转换为JSON格式数据。
- axios：
- 是第三方库，功能更丰富。它支持拦截器，可以在请求发送前和响应接收后进行统一处理，例如添加统一的请求头、处理响应错误等。
- 对请求和响应数据的转换更自动化，会自动将请求数据序列化为合适的格式，将响应数据解析为JavaScript对象（默认JSON格式）。
- 支持取消请求，通过
CancelToken可以取消未完成的请求，这在一些场景下很有用，如用户在请求过程中切换页面时取消不必要的请求。
- 在处理跨域请求时，默认会携带Cookie等凭证（如果服务器支持），相对更方便。
适用场景差异
- fetch：
- 适用于简单的、对原生API依赖较小的前端项目，尤其是注重项目体积，不想引入过多第三方库的情况。
- 当需要对请求和响应进行精细控制，例如自定义复杂的请求头、处理非标准的响应格式时，fetch更为合适。
- axios：
- 适用于中大型项目，这些项目需要更丰富的功能，如拦截器、自动数据转换、取消请求等，以提高开发效率和代码的可维护性。
- 在需要处理复杂的API交互，尤其是涉及到身份验证、错误统一处理等场景时，axios由于其强大的功能和便捷性会是更好的选择。
