fetchaxios 和Ajax区别
Posted 前端干货优选
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了fetchaxios 和Ajax区别相关的知识,希望对你有一定的参考价值。
1.Ajax
Ajax即“Asynchronous javascript And XML”(异步 JavaScript 和 XML),是指一种创建交互式网页应用的网页开发技术。
用法:
const xhr=new XMLHttpRequest()
xhr.open('post','www.baidu.com/a',true)//methods url 同异步
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xhr.send({params})//{params}
xhr.onreadystatechange=function () {
if(xhr.status==200&&xhr.readyState==4){
console.log(xhr.responseText);//使用xhr.responseText
}
}
优点:
提高了性能和速度:减少了客户端和服务器之间的流量传输,同时减少了双方响应的时间,响应更快,因此提高了性能和速度
交互性好:使用ajax,可以开发更快,更具交互性的Web应用程序
异步调用:Ajax对Web服务器进行异步调用。这意味着客户端浏览器在开始渲染之前避免等待所有数据到达。
节省带宽:基于Ajax的应用程序使用较少的服务器带宽,因为无需重新加载完整的页面
底层使用XMLHttpRequest
拥有开源JavaScript库 :JQuery,Prototype,Scriptaculous等。
AJAX通过HTTP协议进行通信。
缺点:
增加了设计和开发的时间
比构建经典Web应用程序更复杂
Ajax应用程序中的安全性较低(容易收到cors和xss攻击),因为所有文件都是在客户端下载的
可能出现网络延迟的问题
禁用javascript的浏览器无法使用该应用程序
由于安全限制,只能使用它来访问服务于初始页面的主机的信息。如果需要显示来自其他服务器的信息,则无法在AJAX中显示
2.axios
axios 基于promise用于浏览器和node.js的http客户端。
用法:
axios({
method: 'post',
url: '/user/12345',
data: {
firstName: '2021-01-01',
lastName: '2021-01-02'
}
})
.then((res)=> {
console.log(res);
})
.catch((err)=> {
console.log(err);
});
优点:
从node.js创建http请求
在浏览器中创建XMLHttpRequest
支持Promise API
提供了一些并发请求的接口
支持拦截请求和响应
转换请求和响应数据
取消请求
自动转换JSON数据
客户端支持防御CSRF/XSRF
3.fetch
fetch号称是AJAX的替代品,是在ES6出现的,使用了ES6中的promise对象。Fetch是基于promise设计的。Fetch的代码结构比起ajax简单多了,参数有点像jQuery ajax。但是,一定记住fetch不是ajax的进一步封装,而是原生js,没有使用XMLHttpRequest对象。(然而问题还是有很多)
用法:
try {
let res = await fetch(url);
let data = res.json();
console.log(data);
} catch(e) {
console.log("error is", e);
}
优点:
符合关注分离,没有将输入、输出和用事件来跟踪的状态混杂在一个对象中
更好更方便的写法
更加底层,提供的API丰富(request,response)
脱离了XHR,是ES规范里新的实现方式
缺点:
fetch只对网络请求报错,对400,500都当做成功的请求,需要封装去处理
fetch默认不会带cookie,需要添加配置项
fetch不支持abort,不支持超时控制,使用setTimeout及Promise.reject和Promise.race结合setTimeout实现的超时控制并不能阻止请求过程继续在后台执行,造成了量的浪费
fetch没有办法原生监测请求的进度,而XHR可以
以上是关于fetchaxios 和Ajax区别的主要内容,如果未能解决你的问题,请参考以下文章