四时宝库

程序员的知识宝库

服务器获取数据方式,axios、fetch与ajax有什么区别?推荐axios

问题:axios、fetch与ajax有什么区别?

主要区别是 axios、fetch请求后都支持Promise对象API,ajax只能用回调函数

ajax:

Ajax被认为是(Asynchronous JavaScript and XML)的缩写。现在,允许浏览器与服务器通信而无须刷新当前页面的技术都被叫做Ajax。

依赖的传输对象:XMLHttpRequest

function success(text) {
 var textarea = document.getElementById('test-response-text');
 textarea.value = text;
}
function fail(code) {
 var textarea = document.getElementById('test-response-text');
 textarea.value = 'Error code: ' + code;
}
var request = new XMLHttpRequest(); // 新建XMLHttpRequest对象
request.onreadystatechange = function () { // 状态发生变化时,函数被回调
 if (request.readyState === 4) { // 成功完成
 // 判断响应结果:
 if (request.status === 200) {
 // 成功,通过responseText拿到响应的文本:
 return success(request.responseText);
 } else {
 // 失败,根据响应码判断失败原因:
 return fail(request.status);
 }
 } else {
 // HTTP请求还在继续...
 }
}
// 发送请求:
request.open('GET', '/api/categories');
request.send();
alert('请求已发送,请等待响应...');

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本质上也是对原生XHR的封装,只不过它是Promise的实现版本,符合最新的ES规范,它有以下几条特性:

  • 从 node.js 创建 http 请求
  • 支持 Promise API
  • 客户端支持防止CSRF
  • 提供了一些并发请求的接口(重要,方便了很多的操作)

Axios既提供了并发的封装,也没有fetch的各种问题,而且体积也较小,推荐大家使用。

fetch

示例:

fetch(url).then(res => {
	console.log(res)
}).catch(err => {
	console.log(err)
})

Fetch API 提供了一个 JavaScript接口,用于访问和操纵HTTP管道的部分,例如请求和响应。它还提供了一个全局 fetch()方法,该方法提供了一种简单,合理的方式来跨网络异步获取资源。

发表评论:

控制面板
您好,欢迎到访网站!
  查看权限
网站分类
最新留言
    友情链接