百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 编程网 > 正文

前后端数据交互(四)——fetch 请求详解

yuyutoo 2024-12-23 14:29 3 浏览 0 评论

fetch 是 XMLHttpRequest 的升级版,使用js脚本发出网络请求,但是与 XMLHttpRequest 不同的是,fetch 方式使用 Promise,相比 XMLHttpRequest 更加简洁。所以我们告别XMLHttpRequest,引入 fetch 如何使用?

一、fetch介绍

fetch() 是一个全局方法,提供一种简单,合理的方式跨网络获取资源。它的请求是基于 Promise 的,需要详细学习 Promise ,请点击《 Promise详解 》。它是专门为了取代传统的 xhr 而生的。

1.1、fetch使用语法

fetch(url,options).then((response)=>{
//处理http响应
},(error)=>{
//处理错误
})

url :是发送网络请求的地址。

options:发送请求参数,

  • body - http请求参数
  • mode - 指定请求模式。默认值为cros:允许跨域;same-origin:只允许同源请求;no-cros:只限于get、post和head,并且只能使用有限的几个简单标头。
  • cache - 用户指定缓存。
  • method - 请求方法,默认GET
  • signal - 用于取消 fetch
  • headers - http请求头设置
  • keepalive - 用于页面卸载时,告诉浏览器在后台保持连接,继续发送数据。
  • credentials - cookie设置,默认omit,忽略不带cookie,same-origin同源请求带cookie,inclue无论跨域还是同源都会带cookie。

1.2、response 对象

fetch 请求成功后,响应 response 对象如图:

  • status - http状态码,范围在100-599之间
  • statusText - 服务器返回状态文字描述
  • ok - 返回布尔值,如果状态码2开头的,则true,反之false
  • headers - 响应头
  • body - 响应体。响应体内的数据,根据类型各自处理。
  • type - 返回请求类型。
  • redirected - 返回布尔值,表示是否发生过跳转。

1.3、读取内容方法

response 对象根据服务器返回的不同类型数据,提供了不同的读取方法。分别有:

  1. response.text() -- 得到文本字符串
  2. response.json() - 得到 json 对象
  3. response.blob() - 得到二进制 blob 对象
  4. response.formData() - 得到 fromData 表单对象
  5. response.arrayBuffer() - 得到二进制 arrayBuffer 对象

上述 5 个方法,返回的都是 promise 对象,必须等到异步操作结束,才能得到服务器返回的完整数据。

1.4、response.clone()

stream 对象只能读取一次,读取完就没了,这意味着,上边的五种读取方法,只能使用一个,否则会报错。

因此 response 对象提供了 clone() 方法,创建 respons 对象副本,实现多次读取。如下:将一张图片,读取两次:

const response1 = await fetch('flowers.jpg');
const response2 = response1.clone();

const myBlob1 = await response1.blob();
const myBlob2 = await response2.blob();

image1.src = URL.createObjectURL(myBlob1);
image2.src = URL.createObjectURL(myBlob2);

1.4、response.body()

body 属性返回一个 ReadableStream 对象,供用户操作,可以用来分块读取内容,显示下载的进度就是其中一种应用。

const response = await fetch('flower.jpg');
const reader = response.body.getReader();
while(true) {
  const {done, value} = await reader.read();
  if (done) {
    break;
  }
  console.log(`Received ${value.length} bytes`)
}

response.body.getReader() 返回一个遍历器,这个遍历器 read() 方法每次都会返回一个对象,表示本次读取的内容块。

二、请求时 POST 和 GET 分别处理

请求方式不同,传值方式也不同。xhr 会分别处理 get 和 post 数据传输,还有请求头设置,同样 fetch 也需要分别处理。

2.1、get 方式

只需要在url中加入传输数据,options中加入请求方式。如下面代码所示:

<input type="text" id="user"><br>
<input type="password" id="pas"><br>
<button onclick="login()">提交</button>
<script>
 function login(){
  fetch(`http://localhost:80/fetch.html?user=${user.value}&pas=${pas.value}`,{
   method:'GET'
  }).then(response=>{
   console.log('响应',response)
  })
 }
</script>

2.2、post 方式

使用 post 发送请求时,需要设置请求头、请求数据等。

将上个实例,改写成 post 方式提交数据,代码如下:

fetch(`http://localhost:80/ES6练习题/53fetch.html`,{
 method:'POST',
 headers:{
  'Content-Type':'application/x-www-form-urlencoded;charset=UTF-8'
 },
 body:`user=${user.value}&pas=${pas.value}`
 }).then(response=>{
  console.log('响应',response)
})

如果是提交json数据时,需要把json转换成字符串。如

body:JSON.stringify(json)

如果提交的是表单数据,使用 formData转化下,如:

body:new FormData(form)

上传文件,可以包含在整个表单里一起提交,如:

const input = document.querySelector('input[type="file"]');

const data = new FormData();
data.append('file', input.files[0]);
data.append('user', 'foo');

fetch('/avatars', {
  method: 'POST',
  body: data
});

上传二进制数据,将 bolb 或 arrayBuffer 数据放到body属性里,如:

let blob = await new Promise(resolve =>   
  canvasElem.toBlob(resolve,  'image/png')
);

let response = await fetch('/article/fetch/post/image', {
  method:  'POST',
  body: blob
});

三、fetch 常见坑

3.1、fetch兼容性

fetch原生支持率如图:

fetch 是相对较新的技术,IE浏览器不支持,还有其他低版本浏览器也不支持,因此如果使用fetch时,需要考虑浏览器兼容问题。

解决办法:引入 polyfill 完美支持 IE8 以上。

  • 由于 IE8 是 ES3,需要引入 ES5 的 polyfill: es5-shim, es5-sham
  • 引入 Promise 的 polyfill:es6-promise
  • 引入 fetch 探测库:fetch-detector
  • 引入 fetch 的 polyfill: fetch-ie8
  • 可选:如果你还使用了 jsonp,引入 fetch-jsonp
  • 可选:开启 Babel 的 runtime 模式,现在就使用 async/await

polyfill 的原理就是探测fetch是否支持,如果不支持则用 xhr 实现。支持 fetch 的浏览器,响应中文会乱码,所以使用 fetch-detector 和 fetch-ie8 解决乱码问题。

3.2、fetch默认不带cookie

传递cookie时,必须在header参数内加上 credentials:'include',才会像 xhr 将当前cookie 带有请求中。

3.3、异常处理

fetch 不同于 xhr ,xhr 自带取消、错误等方法,所以服务器返回 4xx 或 5xx 时,是不会抛出错误的,需要手动处理,通过 response 中的 status 字段来判断。

相关推荐

一篇文章认识JavaScript中的Web API

在了解webapi之前先要明白在我们声明变量三个关键字(var、let、const),我们到底该用哪一个?首先排除var,它是老牌的写法,会有很多问题,可以淘汰掉...我们在开发中建议const...

html5大神结合js带你研究古老读心术,你的心思早被猜透

javascript/HTML5课题:javascript开发读心术游戏PS:大爆料!javascript解密读心术游戏背后故事知识点:读心术原理算法独家揭秘,HTML5最新选择器,...

纯CSS实现3个圆圈横向排列不断闪烁的Loading特效

这个纯CSS实现的Loading特效是一个非常简单而实用的选择,它由三个圆圈横向排列,并不断闪烁。这种动画效果很适合用于页面加载过程中,为用户提供一个愉悦的等待体验。在这个特效的设计中,使用了CSS的...

网站建设知识分享系列文章三:符合用户体验的网页设计应如何做?

上篇文章向各位讲述了网站建设知识分享系列文章二:如何选择建站公司,今天我们来讲述下建站公司选定后,网站制作流程是怎样的,有哪些需要注意的细节性问题。选定建站公司,签订正规劳务合同后,最先开始的是设计环...

「更新」微信小程序 Lottie 动画组件 lottiejs-miniapp V1.1.0 发布

lottiejs-miniapp当前版本号:1.1.0npm地址:...

Web开发基础之jQuery javascript web开发

jQuery是一个JavaScript库。jQuery极大地简化了JavaScript编程。jQuery的语法设计可以使开发更加便捷,例如操作文档对象、选择DOM元素、制作动画效果、事件处理、使用Aj...

Web前端:JavaScript最强总结,最全面的零基础入门教程

JavaScript是网景(Netscape)公司开发的一种基于客户端浏览器、面向(基于)对象、事件驱动式的网页脚本语言。JavaScript语言的前身叫作Livescript。JavaScript...

jQuery 动画制作与特效 jquery的动画函数

使用show()和hide()方法在普通的javascript编程中,要实现元素的显示、隐藏通常是利用其CSS的display属性或者visibility属性。在jQuery中提供了show()和hi...

JavaScript+css实现的登录注册页面web前端html源码

大家好,今天给大家介绍一款,JavaScript+css实现的登录注册页面web前端html源码(图1),布局合理。送给大家哦,获取方式在本文末尾。文本框获取焦点动画特效(图2)源码完整,需要的朋友可...

CSS 3.0+HTML5.0制作各种网页特效

?1、C33实现点击图片渐渐放大特效??2、CSS3实现图片全屏背景特效?3、CSS3实现的鼠标移动到图片上不规则放大??3、jQuery+CSS3模拟苹果桌面系统??4、CSS3+jQuery照片...

js+css实现的按钮悬停动画特效html前端源码,随机元素弹出效果

大家好,今天给大家介绍一款,js+css实现的按钮悬停动画特效html页面前端源码,随机元素弹出(图1)。送给大家哦,获取方式在本文末尾。鼠标经过按钮区域的时候,会随机从不同位置上弹出很多小元素,效果...

Swiper - 免费开源、功能强大的触摸滑动js特效插件

简单配置就能实现手机、PC网页中滑动、焦点轮播图、tab切换和触摸导航等大部分功能。js滑动特效插件Swiper是一款纯javascript打造的滑动特效插件,主要用对移动端web开发...

html5精选特效代码分享(收藏) html酷炫特效

在网页设计过程中,我们会经常用到一些HTML5特效代码,下面就是为大家整理分享的一些好看炫酷且实用的HTML5特效代码,可以放心在您的应用程序中使用。一、Canvas跟随鼠标光标动画特效演示、下载地址...

玩转Markdown(2)——抽象语法树的提取与操纵

上一篇玩转Markdown——数据的分离存储与组件的原生渲染发布,转眼已经鸽了大半年了。最近在操纵mdast生成md文件的时候,心血来潮,把玩转Markdown(2)给补上了。...

任由文字肆意流淌,更自由的开源 Markdown 编辑器

对于创作平台来说内容编辑器是十分重要的功能,强大的编辑器可以让创作者专注于创作“笔”下生花。而最好取悦程序员创作者的方法之一就是支持Markdown写作,因为大多数程序员都是用Markdown...

取消回复欢迎 发表评论: