fetch 与 axios 比较

316 阅读1分钟

1.fetch

fetch是浏览器提供的api,是XMR最新替代技术,

优点:

  • 语法简洁,更加语义化
  • 基于标准Promise实现,支持 async / await
  • 更加底层,提供丰富的api (request/response)
  • 脱离XHR,是es规范里新的实现方式

存在问题:

  • fetch只对网络请求报错,对400,500 都当作成功的请求,服务器返回400,500错误码时并不会reject 只有网络错误这些导致请求不能完成fetch 才会被 reject 。
  • fetch默认不会带cookie,需要添加配置项 fetch(url,{credenials:"include"})
  • fetch 不支持about,不支持超时控制,使用setTimeout及Promise.reject的实现的超时控制并不能阻止请求过程继续在后台运行,造成了流量的浪费。
  • fetch 没有办法原生监测请求进度,而XHR可以,axios也可以。

2.axios

axios 是 社区封装的组件 axios是一个基于Promise用于浏览器和node.js 的HTTP客户端,本质上是对原生XHR的封装,只不过他是Promise的实现版本,符合最新的ES规范

优点:

  • 从浏览器中创建XMLHttpRequest
  • 支持Promise Api
  • 客户端支持防止 csrf
  • 提供了一些并发请求的接口,(重要,方便了很多操作)
  • 从node.js 创建http请求
  • 拦截请求和响应
  • 转化请求和响应数据
  • 取消请求
  • 自动转换JSON数据

总结:axios 既提供了并发的封装,也没有fetch的各种问题,而且体积较小,首选