关于xhr与fetch

我是小阵不悲催
1,229 阅读3分钟

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第3天，点击查看活动详情。

前言

身为一个前端小菜鸟，总是有一个飞高飞远的梦想，因此，每点小成长，我都想要让它变得更有意义，为了自己，也为了更多值得的人

大家都知道「 xhr 」和「 fetch 」都是请求方法，那他们之间有什么区别呢？？

疑问

正文

开开心心学技术大法~~

开心

来了来了，他真的来了~

xhr与fetch

fetch中文传送门

fetch polyfill传送门

共同之处

  1. 都是请求方法；xhr先出来，fetch后被推出；
  2. 都是为了解决前后端交互问题；
  3. 都是为了解决请求各种资源文件的问题；

区别之处

简单来说；

  • fetch使用promise实现的，即便请求500或者400了也不会停止请求
  • fetch没有abort方法，不能随时终止，但是可以引入AbortController和AbortSignal等api来实现abort；

例如：

const controller = new AbortController()
const signal = controller.signal

fetch('./file.json', { signal })
  .then(response => response.text())
  .then(text => console.log(text))
  .catch(err => {
    if (err.name === 'AbortError') {
      controller.abort()
      console.error('Fetch aborted')
    } else {
      console.error('Another error', err)
    }
  })
  • fetch在跨域请求时默认不带上cookie，需要配置credentials:'include'

fetch的使用

fetch(url,options)

第一个参数是url

其他参数在options中配置，默认是get请求方式

可以使用then的同步写法，具体语法可参照promise

fetch返回的resolve会被传入response，response的处理方法有：

  • res.json()  转变为json，这种交互方式在项目中最常见
  • res.text()  转变为字符串，这种方式通常用于后端返回一个页面
  • res.blod()  返回blod流，通常用于文件的接收，可以用 window.URL.createObjectURL(blod) 转变为一个存储在浏览器的文件地址；
    • 如果是图片，则可以用<img src="blod_str"/>来展示到页面上
    • 如果是文件，则可以用<a href='blod_str' />来下载到本地，a标签可以用download属性来指定下载的文件名称
  • formData()将主体内容作为 FormData 对象返回
  • arrayBuffer()将主体内容作为 arrayBuffer 对象返回

附上arrayBuffer传送门，感兴趣的小伙伴可以了解一下~

xhr的使用

xhr全称为XMLHttpRequest，xhr的使用核心就在XMLHttpRequest对象的使用上。

创建xhr对象

在ie8/9 和其他现代浏览器的使用上有区别

  • 所有现代浏览器（IE7+、Firefox、Chrome、Safari 以及 Opera）均内建 XMLHttpRequest 对象。
variable=new XMLHttpRequest();
  • 老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象：
variable=new ActiveXObject("Microsoft.XMLHTTP");

使用xhr

这里我总结了个思维导图，🧠大脑风暴biubiubiu~

以下思维导图从创建过xhr对象之后说起：

xhr大体的属性和方法都在上面详细的列除了，那关于xhr有两个注意点哟，「划重点」！

注意1：

当xhr设置为同步请求时， 我们不推荐使用 async=false，但是对于一些小型的请求，也是可以的。

请记住，JavaScript 会等到服务器响应就绪才继续执行。如果服务器繁忙或缓慢，应用程序会挂起或停止。

注意2：

当使用 async=false 时，请不要编写 onreadystatechange 函数，直接把代码放到send()语句后面即可，如下所示

xmlhttp.open("GET","ajax_info.txt",false);
xmlhttp.send();
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

结语

往期好文推荐「我不推荐下，大家可能就错过了史上最牛逼vscode插件集合啦！！！(嘎嘎嘎~)😄」

avatar
文章
阅读
粉丝