网络请求的方式(XHR,fetch,...)

随着前端的发展,网络请求开始日益发展,那么像XMLHttpRequest,ajax,fetch,axios这些陆续出现,那么这些东西有没有共通点呢,请不要想着他们很复杂其实也非常容易理解。

1.首先XMLHttpRequest是浏览器也就是咱们的宿主提供的一个实现类,咱们通过在js中new出来然后在浏览器的环境中运行,然后通过xhr这个实例,调用其中的方法来实现浏览器与服务器打交道。

//创建一个实现ajax
function ajax(url){
const xhr=new XMLHttpRequest()
xhr.open('get',url,false)
//通过回调函数的方式拿到返回的结果
xhr.onreadystateChange=function(){
//链接成功
if(xhr.readyState===4){
//返回结果为200
if(xhr.status===200){
console.info(xhr.response)
       }
    }
  }
}

不难发现咱们通过xhr这个方式来实现网络通信其实也就是回调函数的方式,然而ajax底层也就是xhr,更具体的说ajax就是一种思想,实际并不是存在的。

2.当我们通过xhr这种方式回调函数的方式去接接收返回值的时候,不难发现会出现一个很明显的问题,也就是回调地狱,简单举个例子:就比如说在第一个回调函数中如果此时此刻我在拿到xhr.response的时候我还需要发送一个网络请求,那么这时候是不是得再通过onreadystatechange呢,如果说我还要呢,那就。。。

果然随着es6中promise的提出,回调地狱问题解决,对应的xhr也该更新换代,这个时候fetch横空出世,当然fetch成为一个API,而不是一个类,大家要理清楚。

function ajaxFetch(){
fetch(url).then((res)=>{return res.json()}.then((data)=>{console.log(data)}))
}

非常简单的链式调用让人爱不释手,这也一下子解决了xhr带来的回调地狱的问题,同时fetch通过数据流传输对象,可以提高网站性能。

3. 然而这么好用的东西人们为啥不用,随着vue的兴起,而是使用主流的axios库呢,axios是xhr的子集,内部改写了xhr的内容,并且提供了一些内置的方法,而且也避免了回调地狱的问题这就导致了占据市场的主流。

总的来说:ajax是一种思想,是通过封装xhr来达到网络请求的目的,而实现网络请求的方式有xhr/fetch,这也是浏览器devTools网络里为啥有这个选项,然而axios是一个库,里边是对xhr实现了改写,同时提供了一些非常实用的拦截方法以及防御措施,具体源码你可以找个文章研究下。

  • 7
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值