jQuery&Axios&ajax&Fetch的区别

ajax

ajax是对原生XHR的封装，除此以外还增加了对JSONP的支持，jQuery ajax经过多年的维护更新，已经非常全面了，有如下缺点:

• 本身针对MVC的编程，不符合现在的前端MVVM的浪潮
• 基于原生的XHR开发，XHR本身的架构不想清晰，已经有了fetch的替代方案
• jQuery整个项目较大，单纯使用ajax却要引入整个jQuery非常的不合理（采用个性化打包方案又不能享受CDN服务）

尽管JQuery对前端的开发工作曾有着深远的影响，但是可以看到随着VUE，REACT新一代框架的兴起，以及ES规范的完善，更多API的更新，jQuery这种大而全的JS库，未来的路会越走越窄

axios

Axios本质上也是对原生XHR的封装，只不过它是Promise的实现版本，符合最新的ES规范，从它的官网上可以看到有以下几条特性：

• 可以从nodejs创建http请求
• 支持promise API
• 客户端支持防止CSRF
• 提供了一些并发请求的接口

支持防止CSRF，通过让每个请求都带一个从cookie中拿到的key，根据浏览器同源策略，假冒的网站是拿不到当前正在使用网站的cookie中的key，这样后台就可以轻松辨别出这个请求是用户在假冒网站上的误导输入，从而采取了正确的策略。Axios即提供了并发的封装，也没有fetch的各种问题，而且体积也比较小，是当前最应该选择的请求方式。

fetch

fetch号称ajax的替代品，有以下几点好处：

• 符合关注分离，没有输入、输出和用事件来跟踪的状态混合在一个对象里。
• 更好的编码方式

try{
    let response = await fetch(url);
    let data = response.json();
    console.log(data)
}catch(e){
    console.log('some error' + e)
}

不管是jQuery还是Axios都已经把xhr封装的足够好了，使用起来也足够方便，但是fetch也有自身的一些优势：

• 语法简洁，更加语义化
• 基于标准Promise实现 支持async/await
• 更加底层，提供丰富的API（request、response）
• 脱离XHR 是ES规范里新的实现

总结

jQuery老迈笨重，fetch年轻稚嫩，Axios正值壮年。