Ajax vs Axios vs Fetch

发HTTP请求是JS前端应用最常见的任务之一。实现HTTP请求有非常多解决方案,目前主流的几个解决方案有 ajax、axios 和 fetch。哪个好?如何选?下面对这几个方案进行一个简单的对比分析。

  • ajax: jQuery库中的异步HTTP请求API。基本语法:

    1
    $.ajax(url[, settings])
  • axios: 轻量的HTTP客户端,支持浏览器端和 Node.js 端。基本语法:

    1
    axios(url[, options]).then().catch()
  • fetch: Web原生的HTTP请求API。基本语法:

    1
    fetch(url[, options]).then().catch()

可以看到 axios 和 fetch 的基本用法非常一致,不过在面对稍复杂一些的需求时使用还是有差别的。

性能

ajax 和 axios 属于第三方库,它们底层都是基于 XMLHttpRequest,而 fetch 是web原生的 JS API,是 web标准 的一部分。从性能上讲,原生API fetch 有天然的性能优势:

1
fetch > axios = ajax

简洁性

在处理异步的方式上,ajax 基于回调,axios 和 fetch 都是基于 Promise,因此代码会比 ajax 更简洁,更优雅。

1
axios = fetch > ajax

jQuery3.0之后,$.ajax()也支持了$.ajax().done().fail().always()的链式调用方式(内部基于Defferred对象实现)。

易用性

在功能上,axios 支持了很多实用的功能封装,比如请求和响应拦截器等等。fetch 则是纯粹的HTTP请求API,不支持额外的功能,你需要自己重写 fetch方法 来实现请求拦截。ajax 也不支持额外的功能。从易用和实用上讲,axios 无疑是占优势的:

1
axios > fetch > ajax

兼容性

兼容性方面,jQuery 是比较早期的库,所以 ajax 对低版本的浏览器支持较好。axios 由于使用了 Promise (ECMAScript2015特性),在一些低版本浏览器中支持的不好,比如IE8和更低的IE浏览器。fetch 只在比较新的现代浏览器中支持,并且所有IE都不支持。从浏览器兼容上讲:

1
ajax > axios > fetch

不过现在旧版本浏览器以及IE浏览器已经在慢慢淘汰,浏览器兼容的顾虑会越来越少,兼容性越来越不重要。所以就放心大胆地使用新的技术吧。

一些不成熟的建议和看法

  • ajax 依然有它的市场,现在依然有很多的依赖 jQuery 库的项目,在 $.ajax 就够用了的情况下,没必要非要引入 axios。
  • 在尤大大的推荐下,Vue 项目一般都搭配 axios 使用,但是不要陷入 “Vue 只能使用 axios”,或者 “axios 只能在 Vue 中使用” 的误区。
  • 以后的大趋势依然是原生web。使用原生的好处之一就是,不依赖外部,不必再加载额外模块,效率高。所以当原生web标准支持越来越多草案后,第三方的库也就没有存在的必要了,以后 fetch 的使用率会越来越高。

不过从历史规律看来,第三方永远比标准发展的快…

最后我想说,没有最好,只有最合适。而只有了解这些技术的特点,才可以让技术选型不再随意或者跟风。


FIGHTING!

参考:
jQuery ajax API
Axios 官网
Fetch API MDN