ajax和axios、fetch的区别

快来打我* 2021-12-17 17:11 343阅读 0赞

[![Nav logo][]][Nav logo 1][写文章][Link 1][注册][Link 2][登录][Link 3]

![nav_jsds_beta-eeb44d165b8ba37680fdb7e65ae17ae4.png][]

*  [首页][Nav logo 1]
 *  [下载App][App]
 *

[×][Link 4]

# ajax和axios、fetch的区别 #

[![96][]][96 1] [赵客缦胡缨v吴钩霜雪明][96 1] ![5203a3bf 1c0f 41db a6f0 31ddb4a929cb][] 关注

7.9 2018.09.13 17:57 字数 1116 阅读 55399评论 10喜欢 197

**1.jQuery ajax**

$.ajax({
       type: 'POST',
       url: url,
       data: data,
       dataType: dataType,
       success: function () {},
       error: function () {}
    });

传统 Ajax 指的是 XMLHttpRequest（XHR）， 最早出现的发送后端请求技术，隶属于原始js中，核心使用XMLHttpRequest对象，多个请求之间如果有先后关系的话，就会出现**回调地狱**。  
JQuery ajax 是对原生XHR的封装，除此以外还增添了对**JSONP**的支持。经过多年的更新维护，真的已经是非常的方便了，优点无需多言；如果是硬要举出几个缺点，那可能只有：  
1.本身是针对MVC的编程,不符合现在前端**MVVM**的浪潮  
2.基于原生的XHR开发，XHR本身的架构不清晰。  
3.JQuery整个项目太大，单纯使用ajax却要引入整个JQuery非常的不合理（采取个性化打包的方案又不能享受CDN服务）  
4.不符合关注分离（Separation of Concerns）的原则  
5.配置和调用方式非常混乱，而且基于事件的异步模型不友好。  
**PS:MVVM(Model-View-ViewModel), 源自于经典的 Model–View–Controller（MVC）模式。MVVM 的出现促进了 GUI 前端开发与后端业务逻辑的分离，极大地提高了前端开发效率。MVVM 的核心是 ViewModel 层，它就像是一个中转站（value converter），负责转换 Model 中的数据对象来让数据变得更容易管理和使用，该层向上与视图层进行双向数据绑定，向下与 Model 层通过接口请求进行数据交互，起呈上启下作用。View 层展现的不是 Model 层的数据，而是 ViewModel 的数据，由 ViewModel 负责与 Model 层交互，这就完全解耦了 View 层和 Model 层，这个解耦是至关重要的，它是前后端分离方案实施的最重要一环。**  
如下图所示：

![webp][]

image.png

**2.axios**

axios({
        method: 'post',
        url: '/user/12345',
        data: {
            firstName: 'Fred',
            lastName: 'Flintstone'
        }
    })
    .then(function (response) {
        console.log(response);
    })
    .catch(function (error) {
        console.log(error);
    });

Vue2.0之后，尤雨溪推荐大家用axios替换JQuery ajax，想必让axios进入了很多人的目光中。  
axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，本质上也是对原生XHR的封装，只不过它是Promise的实现版本，符合最新的ES规范，它本身具有以下特征：  
1.从浏览器中创建 XMLHttpRequest  
2.支持 Promise API  
3.客户端支持防止CSRF  
4.提供了一些并发请求的接口（重要，方便了很多的操作）  
5.从 node.js 创建 http 请求  
6.拦截请求和响应  
7.转换请求和响应数据  
8.取消请求  
9.自动转换JSON数据  
**PS:防止CSRF:就是让你的每个请求都带一个从cookie中拿到的key, 根据浏览器同源策略，假冒的网站是拿不到你cookie中得key的，这样，后台就可以轻松辨别出这个请求是否是用户在假冒网站上的误导输入，从而采取正确的策略。**  
**3.fetch**

try {
      let response = await fetch(url);
      let data = response.json();
      console.log(data);
    } catch(e) {
      console.log("Oops, error", e);
    }

fetch号称是AJAX的替代品，是在ES6出现的，使用了ES6中的promise对象。Fetch是基于promise设计的。Fetch的代码结构比起ajax简单多了，参数有点像jQuery ajax。但是，一定记住**fetch不是ajax的进一步封装，而是原生js，没有使用XMLHttpRequest对象**。  
fetch的优点：  
1.符合关注分离，没有将输入、输出和用事件来跟踪的状态混杂在一个对象里  
2.更好更方便的写法  
坦白说，上面的理由对我来说完全没有什么说服力，因为不管是Jquery还是Axios都已经帮我们把xhr封装的足够好，使用起来也足够方便，为什么我们还要花费大力气去学习fetch？  
我认为fetch的优势主要优势就是：

1.  语法简洁，更加语义化
    2.  基于标准 Promise 实现，支持 async/await
    3.  同构方便，使用 [isomorphic-fetch](https://github.com/matthew-andrews/isomorphic-fetch)
    4.更加底层，提供的API丰富（request, response）
    5.脱离了XHR，是ES规范里新的实现方式

最近在使用fetch的时候，也遇到了不少的问题：  
fetch是一个低层次的API，你可以把它考虑成原生的XHR，所以使用起来并不是那么舒服，需要进行封装。  
例如：

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

**总结：axios既提供了并发的封装，也没有fetch的各种问题，而且体积也较小，当之无愧现在最应该选用的请求的方式。**

您的支持是我前进路上最大的动力，谢谢！

赞赏支持

[ 壹零贰肆][Link 5]

举报文章

[![96][]][96 1]关注[赵客缦胡缨v吴钩霜雪明][96 1] ![5203a3bf 1c0f 41db a6f0 31ddb4a929cb][]

写了 509680 字，被 3159 人关注，获得了 7999 个喜欢

内不欺己，外不欺人，上不欺天。君子所以慎独。

喜欢

197

更多分享

![avatar_default-78d4d1f68984cd6d4379508dd94b4210.png][]

[登录][Link 6] 后发表评论

10条评论 只看作者

按时间倒序按时间正序

[![webp 1][]][webp 1 1]

[Clark马][webp 1 1]

8楼 · 2019.06.18 11:58

fetch的兼容性可以直接放弃了

赞 回复

[麦勇潮][Link 7]：

可以在koa2中使用

2019.06.18 18:47 回复

添加新评论

[![webp 2][]][webp 2 1]

[就叫香克斯][webp 2 1]

7楼 · 2019.05.23 13:03

6666

赞 回复

[![webp 3][]][webp 3 1]

[待我长发及腰\_724f][webp 3 1]

6楼 · 2019.05.18 13:42

fetch底层还是XMLlHTTPRequest对象啊，只不过包了一层Promise吧

赞 回复

[JaneSir][]：

[https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch\_API/Using\_Fetch][https_developer.mozilla.org_zh-CN_docs_Web_API_Fetch_API_Using_Fetch] 请不要误人子弟![:no\_mouth:][no_mouth]

2019.06.21 14:50 回复

添加新评论

[肖霞子][Link 8]

5楼 · 2019.04.24 19:30

多谢，最近在学习vue，正好看到axios，不知道是什么东东

赞 回复

[![webp 4][]][webp 4 1]

[南蓝NL][webp 4 1]

4楼 · 2018.12.13 16:53

手动点赞

2人赞 回复

[![webp 5][]][webp 5 1]

[情有千千节][webp 5 1]

3楼 · 2018.12.03 17:08

挺好,我一直想对比整理一份的,就是太懒没整理. 要是再加上jsonp就更好了

赞 回复

[赵客缦胡缨v吴钩霜雪明][96 1]：

[@情有千千节][webp 5 1] 可以考虑把jsonp,更新进去

2018.12.03 17:16 回复

[microkof][]：

[@赵客缦胡缨v吴钩霜雪明][96 1] 关jsonp啥事

2018.12.10 17:31 回复

添加新评论

*  
 *

被以下专题收入，发现更多相似内容

[![webp 6][]][webp 6 1]

[vue技术栈][webp 6 1]

[![webp 7][]][webp 7 1]

[VUE--日常使用][webp 7 1]

[![webp 8][]][webp 8 1]

[前端Vue专辑][webp 8 1]

[![webp 9][]][webp 9 1]

[转载的][webp 9 1]

[![webp 10][]][webp 10 1]

[为了梦想][webp 10 1]

[![webp 11][]][webp 11 1]

[前端知识点][webp 11 1]

推荐阅读[更多精彩内容][Nav logo 1]

[如何使用 fetch ，加请求头, ajax 和 fetch 和 axios 的区别][fetch _ ajax _ fetch _ axios]

\----欢迎查看我的博客---- 什么是fetch   我们之前，过度过来都在用ajax，那么什么是 Fetch ，Fetch 是新的游览器对象, 等同于 XMLHttpRequest对象 。它提供了许多与 XMLHttpRequest 相同的功能，但被设计成更具可扩展性和...

[![48][]][48 1]

[ WEB\_Jorie][48 1][Ajax, Axios, Fetch区别][Ajax_ Axios_ Fetch]

本文将会根据自己的理解，来阐述Ajax, Axios, Fetch他们之间的区别 1 、JQuery ajax Ajax是对原生XHR的封装，为了达到我们跨越的目的，增添了对JSONP的支持。经过这么多年的更新维护，不得不承认它已经很成熟，能够满足我们的基本需求，但是随着r...

[![48][48 2]][48_48 2]

Axios vs Ajax Axios 基于promise的HTTP库。用在浏览器和node.js中 安装 npm install axois 使用: axios(config) || axios(url\[, config\]) 特殊使用：执行多个并发请求 API axios...

[![48][48 3]][48_48 3]

[ 小淘气\_嘻][48_48 3][你不知道的 XMLHttpRequest][XMLHttpRequest]

本文详细介绍了 XMLHttpRequest 相关知识，涉及内容： AJAX、XMLHTTP、XMLHttpRequest详解、XMLHttpRequest Level 1、Level 2 详解 XHR 上传、下载数据、XHR 流式传输、XHR 定时轮询和长轮询区别与优缺点...

[![48][48 4]][48_48 4]

[ semlinker][48_48 4][![240][]][240 1][什么是Ajax（Ajax的来历、运行原理、优缺点及其它）][240 1]

大家好，我是IT修真院深圳分院第3期的学员，一枚正直纯洁善良的前端程序员，今天给大家分享一下，修真院官网前端工程师深度思考中的知识点——什么是Ajax 一.背景介绍 Ajax的来历 套用一句不恰当的话，Ajax就是中间商（并不赚取差价），换一个专业点的说话，现在它就是脚本发...

[![48][48 5]][48_48 5]

[ 大大头大][48_48 5][![240][240 2]][240_240 2][古根海姆（Guggenheim Partners）遭调查][240_240 2]

2017年11月30日 07:36 英国《金融时报》 詹姆斯•丰塔内拉汗，苏吉特•因达普，乔•伦尼森和卡拉•斯坎内尔 四名记者在纽约报道。 原文链接：http://www.ftchinese.com/story/001075285?full=y 这篇报道叙述了三个事件： 1...

[![48][48 6]][48_48 6]

[ 金石明镜][48_48 6][我只愿岁月有你陪伴][Link 9]

媽媽 我再爱你到永远永远。

[![48][48 7]][48_48 7]

[ Lydiacrown][48_48 7][![240][240 3]][240_240 3][儿子嫌弃乞丐父亲不理，父亲跪在儿家门，父亲的做法让儿子傻了][240_240 3]

本故事为弘扬正能量，请读者走心阅读。 故事发生在高新村，小川从小母亲就因病离世了，父亲王富贵一把屎一把尿把他养了这么大，耗费了多少心血。 可是小川却一直嫌弃父亲王富贵，王富贵一直以来没有工作，挣钱的唯一途径就是去乞讨要饭捡破烂，不过你还别说，前十几年捡破烂乞讨还真能赚钱，一...

[![48][48 8]][48_48 8]

[ 全民故事汇][48_48 8][你敢挑战这些俯卧撑吗？][Link 10]

关于用俯卧撑来锻炼身体，有的人说只有一种，有的人说只能锻炼到胸肌等等。事实上用俯卧撑基本上可以锻炼到全身的肌肉，并且俯卧撑有多种不同的做法，当然锻炼的难度、效果也不同。今天本文要分享的是八种不同俯卧撑的正确做法。 1、一般俯卧撑 这种是大家最常用的俯卧撑，采用双手略宽于肩，...

[![48][48 9]][48_48 9]

[ 秀木木][48_48 9]

[Nav logo]: /images/20211214/a4a4c207aaea47e08fdc049e0d64741f.png
[Nav logo 1]: https://www.jianshu.com/
[Link 1]: https://www.jianshu.com/writer#/
[Link 2]: https://www.jianshu.com/sign_up
[Link 3]: https://www.jianshu.com/sign_in
[nav_jsds_beta-eeb44d165b8ba37680fdb7e65ae17ae4.png]: /images/20211214/6e2adb7f083547b0ad667ae7c813bbea.png
[App]: https://www.jianshu.com/apps?utm_medium=desktop&utm_source=navbar-apps
[Link 4]: https://www.jianshu.com/apps/redirect?utm_source=side-banner-click
[96]: https://upload.jianshu.io/users/upload_avatars/6943526/78e12266-f7a2-4ce4-8110-f74d71694add.jpg?imageMogr2/auto-orient/strip%7CimageView2/1/w/96/h/96
[96 1]: https://www.jianshu.com/u/910c6f95a495
[5203a3bf 1c0f 41db a6f0 31ddb4a929cb]: /images/20211214/3de9f2cecbe14ed39f85b3dad69ad9a8.png
[webp]: /images/20211214/4d812f8e81ca4e05bcb8392c70c335d9.png
[Link 5]: https://www.jianshu.com/nb/28093301
[avatar_default-78d4d1f68984cd6d4379508dd94b4210.png]: /images/20211214/2aed4290a58a44819705374c0da58bf9.png
[Link 6]: https://www.jianshu.com/sign_in?utm_source=desktop&utm_medium=not-signed-in-comment-form
[webp 1]: /images/20211214/9dc005bb33b341e09855f0985c8e9500.png
[webp 1 1]: https://www.jianshu.com/u/45263075cd76
[Link 7]: https://www.jianshu.com/u/bfbad37b8e0a
[webp 2]: https://upload.jianshu.io/users/upload_avatars/1366937/da2dfe82-6812-4ff7-8437-9a3e728f79d1.jpg?imageMogr2/auto-orient/strip%7CimageView2/1/w/114/h/114/format/webp
[webp 2 1]: https://www.jianshu.com/u/26c2e0608895
[webp 3]: /images/20211214/ccb887297398478dae1956fbce317f6e.png
[webp 3 1]: https://www.jianshu.com/u/dcb38132781b
[JaneSir]: https://www.jianshu.com/u/33dc16b06b92
[https_developer.mozilla.org_zh-CN_docs_Web_API_Fetch_API_Using_Fetch]: https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API/Using_Fetch
[no_mouth]: /images/20211214/4a6432d0a88f4de6bd9e929d78c02dd0.png
[Link 8]: https://www.jianshu.com/u/54130eba1dfd
[webp 4]: /images/20211214/f6192d05287643039e3e43437032bbb1.png
[webp 4 1]: https://www.jianshu.com/u/0b6c35832552
[webp 5]: /images/20211214/4f2ddf47b2a74a4dab501811353b348b.png
[webp 5 1]: https://www.jianshu.com/u/838019bebe21
[microkof]: https://www.jianshu.com/u/eec05fd43014
[webp 6]: /images/20211214/d742d0c0889b4fb88179a315a5050e31.png
[webp 6 1]: https://www.jianshu.com/c/81da85d1aa7d?utm_source=desktop&utm_medium=notes-included-collection
[webp 7]: /images/20211214/677fa48025e14a77a215b0510964b40e.png
[webp 7 1]: https://www.jianshu.com/c/678b6b28f552?utm_source=desktop&utm_medium=notes-included-collection
[webp 8]: /images/20211214/8d6ee351d92c4bca8b09211c93961a23.png
[webp 8 1]: https://www.jianshu.com/c/e72f86d5812a?utm_source=desktop&utm_medium=notes-included-collection
[webp 9]: /images/20211214/39d550a227eb445d83eb4a4203dc4f2a.png
[webp 9 1]: https://www.jianshu.com/c/3dbf25fb15be?utm_source=desktop&utm_medium=notes-included-collection
[webp 10]: /images/20211214/af9be491f61749c6a3254fd21e142fc5.png
[webp 10 1]: https://www.jianshu.com/c/ba352704f1ef?utm_source=desktop&utm_medium=notes-included-collection
[webp 11]: /images/20211214/39d4cef8360f4cc98c75b81ed3c0a42e.png
[webp 11 1]: https://www.jianshu.com/c/99a985b7ced1?utm_source=desktop&utm_medium=notes-included-collection
[fetch _ ajax _ fetch _ axios]: https://www.jianshu.com/p/d82ef683d02f?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation
[48]: /images/20211214/48453a7457ce4886b5d4fdce62e43d4e.png
[48 1]: https://www.jianshu.com/u/b15b6a3db1ce?utm_campaign=maleskine&utm_content=user&utm_medium=seo_notes&utm_source=recommendation
[Ajax_ Axios_ Fetch]: https://www.jianshu.com/p/6937c42e3db8?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation
[48 2]: https://upload.jianshu.io/users/upload_avatars/3488163/df770af01d60.jpg?imageMogr2/auto-orient/strip%7CimageView2/1/w/48/h/48
[48_48 2]: /images/20211214/4b551a83133f4aea8e33fd32e5a88a11.png
[Axios _ Ajax _ Await_Async _ asyncData _ fetch]: https://www.jianshu.com/p/e12ba33b9939?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation
[48 3]: https://upload.jianshu.io/users/upload_avatars/1314987/2764dbeb169b?imageMogr2/auto-orient/strip%7CimageView2/1/w/48/h/48
[48_48 3]: /images/20211214/aec9c3ae4b434fdeaefd4df54a9c29f5.png
[XMLHttpRequest]: https://www.jianshu.com/p/22f82be980fb?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation
[48 4]: https://upload.jianshu.io/users/upload_avatars/5006018/b4639c0e-214e-462d-a702-5f2330332234.png?imageMogr2/auto-orient/strip%7CimageView2/1/w/48/h/48
[48_48 4]: /images/20211214/13809e49b1f8444ca5dae829848a1440.png
[240]: /images/20211214/3fb9b767ae8f40708f16a1a3630d1b45.png
[240 1]: https://www.jianshu.com/p/cedc7b5739a6?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation
[48 5]: https://upload.jianshu.io/users/upload_avatars/7995515/6fbb8585-efbf-4163-9570-aa5ce1177432.jpg?imageMogr2/auto-orient/strip%7CimageView2/1/w/48/h/48
[48_48 5]: /images/20211214/cdfea5af836144e78831df9fdab4bbf5.png
[240 2]: https://upload-images.jianshu.io/upload_images/3721842-94565cd8f50648af.jpg?imageMogr2/auto-orient/strip%7CimageView2/1/w/300/h/240
[240_240 2]: /images/20211214/d3d7a0702dd34105aa876ee5b25fe84d.png
[48 6]: https://upload.jianshu.io/users/upload_avatars/3721842/1e34cc03eb71.jpg?imageMogr2/auto-orient/strip%7CimageView2/1/w/48/h/48
[48_48 6]: /images/20211214/2af55beefc7342e996e0b7d8c54154bc.png
[Link 9]: https://www.jianshu.com/p/71fa9b9d813a?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation
[48 7]: https://upload.jianshu.io/users/upload_avatars/1153386/fb6eab22c4cc.jpg?imageMogr2/auto-orient/strip%7CimageView2/1/w/48/h/48
[48_48 7]: /images/20211214/7a44d9839e0945a89a7c67d5b898f182.png
[240 3]: https://upload-images.jianshu.io/upload_images/10823978-1acde541e396484e.jpg?imageMogr2/auto-orient/strip%7CimageView2/1/w/300/h/240
[240_240 3]: /images/20211214/7ae54d253bbf439ba718cc0c60962f88.png
[48 8]: https://upload.jianshu.io/users/upload_avatars/10823978/d26df63a-41ee-4bff-ae67-f7f2ab841445.jpg?imageMogr2/auto-orient/strip%7CimageView2/1/w/48/h/48
[48_48 8]: /images/20211214/80b9d4466381483fae85c46fb4b9f26e.png
[Link 10]: https://www.jianshu.com/p/e82d8dfbba0a?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation
[48 9]: https://upload.jianshu.io/users/upload_avatars/3823291/6bab7c585b97?imageMogr2/auto-orient/strip%7CimageView2/1/w/48/h/48
[48_48 9]: /images/20211214/bfcf71a20432490f816dfac2c5d29500.png