网络请求的方式(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
    评论
### 回答1: fetch/xhr和其他请求(如axios、ajax等)之间的主要区别在于它们的使用方式和一些功能上的不同。 首先,fetch是一种基于Promise的现代化网络请求API,而xhr是一种传统的XMLHttpRequest对象。fetch API基于新的web标准,可以更好地处理请求和响应,支持更多现代化的功能,而xhr则是老旧的方式。 另一个区别在于fetch API返回的是一个Promise对象,可以使用Promise的链式调用和async/await语法,非常方便处理异步操作。而xhr则需要使用回调函数来处理异步操作,代码结构可能相对复杂。 此外,fetch API默认情况下不会携带cookie信息,需要设置credentials属性为"include"才能发送cookie。而xhr默认会发送cookie信息,需要手动设置xhr.withCredentials属性为true来禁止发送cookie。 另外,fetch API在默认情况下只会拒绝请求错误的状态码(如404或500等),而不会拒绝其他的网络错误(如网络超时)。这意味着需要手动检查并处理网络错误。而xhr则可以通过onerror事件来处理所有类型的网络错误。 最后,fetch API在使用上可能相对简单,语法更加直观。而xhr则相对复杂,需要手动设置请求头、处理请求和响应等。 总结起来,fetch/xhr和其他请求的主要区别在于使用方式、功能支持和代码结构等方面。fetch提供了更现代化、更简洁的API,支持Promise和async/await语法,但xhr仍然是一种可靠和广泛使用的老旧方式。 ### 回答2: fetch和XMLHttpRequest (XHR) 是两种常用的网络请求方式,它们之间有以下几点区别: 1. 语法使用:fetch是浏览器提供的一种基于Promise的现代API,通过使用ES6的语法,使用更加简洁。XHR则是使用传统的回调函数的方式,使得代码可读性较差。 2. URL和参数:在使用fetch时,可以将URL和请求参数作为参数传递给fetch函数。XHR需要手动构建URL和参数,增加了额外的代码。 3. 跨域请求fetch默认不会将跨域的cookie发送到目标服务器,需要设置`credentials`配置项为"include"。而XHR请求跨域时会自动携带cookie。 4. 请求头配置:fetch通过调用`Headers`对象来设置请求头信息,更加方便。XHR则需要通过`setRequestHeader`方法来设置。 5. 请求/响应:使用fetch时,需要通过两个Promise分别处理请求和响应,使得代码更加清晰。XHR则需要编写多个回调函数来处理请求与响应,并引发回调地狱问题。 6. 取消请求:使用fetch时,可以使用`AbortController`对象来取消正在进行的请求XHR则需要手动使用`abort`方法来取消请求。 综上所述,fetch相比XHR具有更好的语法简洁性、使用更加方便、处理异步操作更加优雅等优点,但XHR在兼容性和一些特殊场景处理方面表现更好。所以,在选择网络请求方式时,根据具体的场景需求进行选择。 ### 回答3: fetchXHR(XMLHttpRequest)都是用于发送HTTP请求并获取响应的JavaScript API。它们的主要区别如下: 1. 语法:fetch使用更简洁的语法,基于Promise实现,而XHR使用回调函数来处理异步请求。 2. 兼容性:XHR在所有主流浏览器中都得到了广泛支持,包括较旧的版本。而fetch在一些旧版本的浏览器中可能不被完全支持,需要使用polyfill进行兼容。 3. 请求和响应对象:XHR通过实例化XMLHttpRequest对象,并使用该对象来发送请求和接收响应。而fetch直接使用全局fetch函数来发送请求并返回一个Promise对象,该对象包含响应的相关信息。 4. 请求和响应的处理:XHR可以通过各种回调函数来处理请求和响应,包括onload、onerror和onprogress等。而fetch使用then方法链式调用来处理请求和响应,也可以使用catch捕获错误。 5. 默认不接受跨域请求:在默认情况下,XHR在同源策略下才能发送跨域请求。而fetch在跨域请求时,默认不发送站点的身份验证cookie和HTTP认证信息,需要手动设置credentials为include。 总的来说,fetch相对于XHR提供了更简洁的语法和更强大的功能,并且更符合现代JavaScript的编码风格。但是在兼容性方面,XHR更广泛支持,可以在更多的浏览器环境中使用。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值