专注前端行业精选
当前位置:网站首页 > 最近更新 > 前端开发 > 面试题 > 正文

Ajax、fetch、axios的区别 优缺点介绍 为什么要用axios?

作者:鹏仔先生日期:2020-06-01浏览:826分类:面试题

ajax

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


优缺点:

    本身是针对mvc编程,不符合mvvm前端开发流程

    基于原生XHR进行开发,XHR结构本身不清晰
    JQuery整个项目太大,单纯使用ajax却要引入整个JQuery非常的不合理


fetch

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


优缺点:

    关注分离,没有将输入、输出和用事件来跟踪的状态混合在一个对象中更好更方便的写法更加底层化,提供了丰富的API 脱离了XHR 
    1)fetchtch只对网络请求报错,对400,500都当做成功的请求,需要封装去处理 
    2)fetch默认不会带cookie,需要添加配置项 
    3)fetch不支持abort,不支持超时控制,使用setTimeout及Promise.reject的实现的超时控制并不能阻止请求过程继续在后台运行,造成了量的浪费 
    4)fetch没有办法原生监测请求的进度,而XHR可以


axios

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


优缺点:

    从浏览器中创建XMLHttpRequest
    从node.js 中发出http请求
    支持 Promise API
    客户端支持防止CSRF(伪脚本攻击)
    -提供了并发请求API接口
    支持请求/响应拦截
    取消请求
    -自动转换json数据


为什么要用axios?
    axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,它本身具有以下特征:
    从浏览器中创建 XMLHttpRequest
    从 node.js 发出 http 请求
    支持 Promise API
    拦截请求和响应
    转换请求和响应数据
    取消请求
    自动转换JSON数据
    客户端支持防止CSRF/XSRF

手机扫码访问

已有2位网友发表了看法:

  • 鹏仔先生

    鹏仔先生  评论于 [2022-08-03 16:08:47]  回复

    ajax和fetch的区别 :
    (1)、ajax是利用XMLHttpRequest对象来请求数据的,而fetch是window的一个方法
    (2)、ajax基于原生的XHR开发,XHR本身的架构不清晰,已经有了fetch的替代方案
    (3)、fetch比较与ajax有着更好更方便的写法
    (4)、fetch只对网络请求报错,对400,500都当做成功的请求,需要封装去处理
    (5)、fetch没有办法原生监测请求的进度,而XHR可以

  • 鹏仔先生

    鹏仔先生  评论于 [2022-08-03 16:08:36]  回复

    区别:1、fetch没有办法原生监测请求的进度,而ajax基于原生的XHR开发,可以监测;2、和ajax相比,fetch有着更好更方便的写法;3、fetch只对网络请求报错,对400、500都当做成功的请求,而ajax不会。

取消回复欢迎 发表评论:

关灯

前端微信百人大群×