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

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

分享

分享海报

扫一扫 - 分享本文

打赏

微信

扫一扫 - 打赏鹏仔

收藏

请按下 Ctrl + D

即可收藏当前文章

手机看

分享到微信朋友圈

扫一扫 - 手机阅读

侵权投诉

侵权、举报、建议

↓