关于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的新特性介绍
Oct 31 HTML / CSS
巧用CSS3 border实现图片遮罩效果代码
Apr 09 HTML / CSS
CSS3实现头像旋转效果
Mar 13 HTML / CSS
纯CSS3+DIV实现小三角形边框效果的示例代码
Aug 03 HTML / CSS
详解HTML5中垂直上下居中的解决方案
Dec 20 HTML / CSS
html5的画布canvas——画出简单的矩形、三角形实例代码
Jun 09 HTML / CSS
HTML5 input元素类型:email及url介绍
Aug 13 HTML / CSS
让IE下支持Html5的placeholder属性的插件
Sep 02 HTML / CSS
举例详解HTML5中使用JSON格式提交表单
Jun 16 HTML / CSS
HTML5利用约束验证API来检查表单的输入数据的代码实例
Dec 20 HTML / CSS
localStorage的过期时间设置的方法详解
Nov 26 HTML / CSS
遮罩层 + Iframe实现界面自动显示的示例代码
Apr 26 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
PHP+DBM的同学录程序(4)
2006/10/09 PHP
php实现的获取网站备案信息查询代码(360)
2013/09/23 PHP
一个PHP的远程图片抓取函数分享
2013/09/25 PHP
async和DOM Script文件加载比较
2014/07/20 PHP
php几个预定义变量$_SERVER用法小结
2014/11/07 PHP
PHP aes (ecb)解密后乱码问题
2015/06/22 PHP
Ajax提交表单时验证码自动验证 php后端验证码检测
2016/07/20 PHP
php array_map使用自定义的函数处理数组中的每个值
2016/10/26 PHP
Thinkphp5+uploadify实现的文件上传功能示例
2018/05/26 PHP
深入理解JavaScript系列(45):代码复用模式(避免篇)详解
2015/03/04 Javascript
jQuery实现页面内锚点平滑跳转特效的方法总结
2015/05/11 Javascript
基于Vuejs框架实现翻页组件
2020/06/29 Javascript
Javascript 使用ajax与C#获取文件大小实例详解
2017/01/13 Javascript
jQuery Pagination分页插件_动力节点Java学院整理
2017/07/17 jQuery
简单谈谈关于Angular Cli打包的事
2017/09/05 Javascript
NW.js 简介与使用方法
2018/02/01 Javascript
jQuery实现的老虎机跑动效果示例
2018/12/29 jQuery
three.js着色器材质的内置变量示例详解
2020/08/16 Javascript
通过数据库向Django模型添加字段的示例
2015/07/21 Python
python 爬虫一键爬取 淘宝天猫宝贝页面主图颜色图和详情图的教程
2018/05/22 Python
基于DataFrame改变列类型的方法
2018/07/25 Python
详解用python实现基本的学生管理系统(文件存储版)(python3)
2019/04/25 Python
python基础教程之while循环
2019/08/14 Python
Python操作Mongodb数据库的方法小结
2019/09/10 Python
Python图像处理库PIL的ImageDraw模块介绍详解
2020/02/26 Python
在服务器上安装python3.8.2环境的教程详解
2020/04/26 Python
Python 解决相对路径问题:&quot;No such file or directory&quot;
2020/06/05 Python
HTML5 canvas标签实现刮刮卡效果
2015/04/24 HTML / CSS
汽车技术服务与营销专业在籍生自荐信
2013/09/28 职场文书
档案接收函范文
2014/01/10 职场文书
小学毕业感言50字
2014/02/16 职场文书
和谐拯救危机观后感
2015/06/15 职场文书
消防宣传标语大全
2015/08/03 职场文书
小程序后台PHP版本部署运行 LNMP+WNMP
2021/04/01 Servers
Django显示可视化图表的实践
2021/05/10 Python
教你使用VS Code的MySQL扩展管理数据库的方法
2022/01/22 MySQL