浅谈ajax和axios、fetch的区别

最新推荐文章于 2024-05-13 21:44:28 发布

周末笔记

最新推荐文章于 2024-05-13 21:44:28 发布

阅读量586

点赞数 1

文章标签： javascript 前端 ajax

原文链接：https://blog.csdn.net/weixin_45259626/article/details/105560834

版权

axios和ajax的区别：

1.区别

axios是通过promise实现对ajax技术的一种封装，就像jQuery实现ajax封装一样。简单来说： ajax技术实现了网页的局部数据刷新，axios实现了对ajax的封装。 axios是ajax ajax不止axios。

Ajax：
Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。
Ajax = 异步 JavaScript 和 XML（标准通用标记语言的子集）。
Ajax 是一种用于创建快速动态网页的技术。
Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。
通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
传统的网页（不使用 Ajax）如果需要更新内容，必须重载整个网页页面。

$.ajax({
	 url: 'http://jsonplaceholder.typicode.com/users',
     type: 'get',
     dataType: 'json',
     data: {
        //'a': 1,
        //'b': 2,
     },
     success: function (response) {
        console.log(response)；
     }
})

axios：
用于浏览器和node.js的基于Promise的HTTP客户端

1、从浏览器制作XMLHttpRequests
2、让HTTP从node.js的请求
3、支持Promise API
4、拦截请求和响应
5、转换请求和响应数据
6、取消请求
7、自动转换为JSON数据
8、客户端支持防止XSRF

axios({
     url: 'http://jsonplaceholder.typicode.com/users',
     method: 'get',
     responseType: 'json', // 默认的
     data: {
        //'a': 1,
        //'b': 2,
     }
  }).then(function (response) {
       console.log(response);
       console.log(response.data);
  }).catch(function (error) {
       console.log(error);
  })

2.优缺点：

ajax：本身是针对MVC的编程,不符合现在前端MVVM的浪潮基于原生的XHR开发，XHR本身的架构不清晰，已经有了fetch的替代方案 JQuery整个项目太大，单纯使用ajax却要引入整个JQuery非常的不合理（采取个性化打包的方案又不能享受CDN服务 axios：从 node.js 创建 http 请求支持 Promise API 客户端支持防止CSRF。

ajax 实现了局部数据刷新
本身是针对MVC的编程,多用于jquery项目，不符合现在前端MVVM的浪潮

axios
基于ajax封装
为MVVM框架而生 (vue react)
支持 Promise API
支持并发请求

fetch
AJAX在ES6的替代品
fetch不是ajax的进一步封装，而是原生js，没有使用XMLHttpRequest对象。
兼容性差

转载自：https://blog.csdn.net/weixin_45259626/article/details/105560834