关于h5中的fetch方法解读(小结)


Posted in HTML / CSS onNovember 15, 2017

Fetch概念

fetch身为H5中的一个新对象,他的诞生,是为了取代ajax的存在而出现,主要目的仅仅只是为了结合ServiceWorkers,来达到以下优化:

  1. 优化离线体验
  2. 保持可扩展性

当然如果ServiceWorkers和浏览器端的数据库IndexedDB配合,那么恭喜你,每一个浏览器都可以成为一个代理服务器一样的存在。(然而我并不认为这样是好事,这样会使得前端越来越重,走以前c/s架构的老路)

1. 前言

既然是h5的新方法,肯定就有一些比较older的浏览器不支持了,对于那些不支持此方法的

浏览器就需要额外的添加一个polyfill:

[链接]: https://github.com/fis-components/whatwg-fetch

2. 用法

ferch(抓取) :

HTML:

fetch('/users.html') //这里返回的是一个Promise对象,不支持的浏览器需要相应的ployfill或通过babel等转码器转码后在执行
    .then(function(response) {
    return response.text()})
    .then(function(body) {
    document.body.innerHTML = body
})

JSON : 

fetch('/users.json')
    .then(function(response) {
    return response.json()})
    .then(function(json) {
    console.log('parsed json', json)})
    .catch(function(ex) {
    console.log('parsing failed', ex)
})

Response metadata :

fetch('/users.json').then(function(response) {
  console.log(response.headers.get('Content-Type'))
  console.log(response.headers.get('Date'))
  console.log(response.status)
  console.log(response.statusText)
})

Post form:

var form = document.querySelector('form')

fetch('/users', {
  method: 'POST',
  body: new FormData(form)
})

Post JSON:

fetch('/users', {
  method: 'POST',
  headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({  //这里是post请求的请求体
    name: 'Hubot',
    login: 'hubot',
  })
})

File upload:

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

var data = new FormData()
data.append('file', input.files[0]) //这里获取选择的文件内容
data.append('user', 'hubot')

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

3. 注意事项

(1)和ajax的不同点:

1. fatch方法抓取数据时不会抛出错误即使是404或500错误,除非是网络错误或者请求过程中被打断.但当然有解决方法啦,下面是demonstration:

function checkStatus(response) {
  if (response.status >= 200 && response.status < 300) { //判断响应的状态码是否正常
    return response //正常返回原响应对象
  } else {
    var error = new Error(response.statusText) //不正常则抛出一个响应错误状态信息
    error.response = response
    throw error
  }
}

function parseJSON(response) {
  return response.json()
}

fetch('/users')
  .then(checkStatus)
  .then(parseJSON)
  .then(function(data) {
    console.log('request succeeded with JSON response', data)
  }).catch(function(error) {
    console.log('request failed', error)
  })

2.一个很关键的问题,fetch方法不会发送cookie,这对于需要保持客户端和服务器端常连接就很致命了,因为服务器端需要通过cookie来识别某一个session来达到保持会话状态.要想发送cookie需要修改一下信息:

fetch('/users', {
  credentials: 'same-origin'  //同域下发送cookie
})
fetch('https://segmentfault.com', {
  credentials: 'include'     //跨域下发送cookie
})

下图是跨域访问segment的结果

关于h5中的fetch方法解读(小结)

Additional

如果不出意外的话,请求的url和响应的url是相同的,但是如果像redirect这种操作的话response.url可能就会不一样.在XHR时,redirect后的response.url可能就不太准确了,需要设置下:response.headers['X-Request-URL'] = request.url适用于( Firefox < 32, Chrome < 37, Safari, or IE.)

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
CSS3画一个阴阳八卦图
Mar 09 HTML / CSS
css3绘制天猫logo实现代码
Nov 06 HTML / CSS
css3实现可滑动跳转的分页插件示例
May 08 HTML / CSS
css3 clip实现圆环进度条的示例代码
Feb 07 HTML / CSS
css3实现元素环绕中心点布局的方法示例
Jan 15 HTML / CSS
CSS3实现文字描边的2种方法(小结)
Feb 14 HTML / CSS
详解CSS3 filter:drop-shadow滤镜与box-shadow区别与应用
Aug 24 HTML / CSS
HTML5引入的新数组TypedArray介绍
Dec 24 HTML / CSS
HTML5中使用postMessage实现两个网页间传递数据
Jun 22 HTML / CSS
浅析HTML5中的 History 模式
Jun 22 HTML / CSS
html5 制作地图当前定位箭头的方法示例
Jan 10 HTML / CSS
td 内容自动换行 table表格td设置宽度后文字太多自动换行
Dec 24 HTML / CSS
canvas 实现 github404动态效果的示例代码
Nov 15 #HTML / CSS
手机端用rem+scss做适配的详解
Nov 15 #HTML / CSS
基于HTML5的WebGL经典3D虚拟机房漫游动画
Nov 15 #HTML / CSS
Adobe Html5 Extension开发初体验图文教程
Nov 14 #HTML / CSS
html5中canvas图表实现柱状图的示例
Nov 13 #HTML / CSS
有关HTML5页面在iPhoneX适配问题
Nov 13 #HTML / CSS
浅谈HTML5 FileReader分布读取文件以及其方法简介
Nov 09 #HTML / CSS
You might like
destoon实现会员商铺中指定会员或会员组投放广告的方法
2014/08/21 PHP
php curl获取https页面内容,不直接输出返回结果的设置方法
2019/01/15 PHP
清除网页历史记录,屏蔽后退按钮!
2008/12/22 Javascript
多种方法判断Javascript对象是否存在
2013/09/22 Javascript
js中arguments,caller,callee,apply的用法小结
2014/01/28 Javascript
javascript获取form里的表单元素的示例代码
2014/02/14 Javascript
Javascript 学习笔记之 对象篇(二) : 原型对象
2014/06/24 Javascript
JavaScript对象反射用法实例
2015/04/17 Javascript
JavaScript中isPrototypeOf函数作用和使用实例
2015/06/01 Javascript
纯jquery实现模仿淘宝购物车结算
2015/08/20 Javascript
基于jquery实现select选择框内容左右移动添加删除代码分享
2015/08/25 Javascript
D3.js实现文本的换行详解
2016/10/14 Javascript
javascript和jQuery中的AJAX技术详解【包含AJAX各种跨域技术】
2016/12/15 Javascript
bootstrap中添加额外的图标实例代码
2017/02/15 Javascript
JS实现全屏预览F11功能的示例代码
2018/07/23 Javascript
[47:20]DAC2018 4.4 淘汰赛 Optic vs Mineski 第一场
2018/04/05 DOTA
Python fileinput模块使用实例
2015/06/03 Python
探究python中open函数的使用
2016/03/01 Python
Python多进程同步简单实现代码
2016/04/27 Python
利用Python批量压缩png方法实例(支持过滤个别文件与文件夹)
2017/07/30 Python
今天 平安夜 Python 送你一顶圣诞帽 @微信官方
2017/12/25 Python
python2与python3的print及字符串格式化小结
2018/11/30 Python
浅谈keras 的抽象后端(from keras import backend as K)
2020/06/16 Python
彻底解决pip下载pytorch慢的问题方法
2021/03/01 Python
美国专注于健康商品的网站:eVitamins
2017/01/23 全球购物
美国在线印刷公司:PsPrint
2017/10/12 全球购物
Lookfantastic日本官网:英国知名护肤、化妆品和头发护理购物网站
2018/04/21 全球购物
村委会贫困证明
2014/01/14 职场文书
艺术学院毕业生自我评价
2014/03/02 职场文书
法制宣传月活动总结
2014/04/29 职场文书
KTV门卫岗位职责
2014/10/09 职场文书
先进基层党组织材料
2014/12/25 职场文书
如何写新闻稿
2015/07/18 职场文书
导游词之茶卡盐湖
2019/11/26 职场文书
python 安全地删除列表元素的方法
2022/03/16 Python
Android基于Fresco实现圆角和圆形图片
2022/04/01 Java/Android