h5的fetch方法_关于h5中的fetch方法解读
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的结果
Addit中比需抖接朋功要朋插ional
如果不出意外的话,请求的url和响应的url是相同的,但是如果像redirect这种操作的
话response.url可能就会不一样.在XHR时,redirect后的response.url可能就不太准
确了,需要设置下:response.headers['X-Request-URL'] = request.url
适用于( Firefox < 32, Chrome < 37, Safari, or IE.)
h5的fetch方法_关于h5中的fetch方法解读相关推荐
- java 调用祖父方法_在Java中调用祖父母方法:您不能
java 调用祖父方法 在文章保护的重点中,我详细介绍了"受保护"如何扩展"包私有"访问. 我在那儿写道: 你能做的是 覆盖子类中的方法或 使用关键字super ...
- Java main方法_解释Java中的main方法,及其作用_一个java文件中可包含多个main方法
public static void main(String[] args) {} 或者 public static void main(String args[]) {} main方法是我们学习Ja ...
- bootstrap方法_中介效应中的bootstrap方法
当我们有如上图所示的中介模型时,x--m的系数为0.1,m--y的系数也为0.1,这两个系数是显著的.但是0.1*0.1=0.01,此时中介效应还是显著的吗? 为了解决这个问题,有人提出只要两条路径都 ...
- java 废弃方法_在Java中使用Deprecated方法或类是错误的吗?
Cats萌萌 术语来自官方的Sun词汇表:deprecation:指不再推荐的类,接口,构造函数,方法或字段,可能在将来的版本中不再存在.从何时何时弃用指南:您可能已经听过"自我贬低的幽默& ...
- java list sublist方法_聊聊ArrayList中的subList方法
开发过程中遇到的坑 开发过程经常会使用subList做分页处理. 比如下面的代码 while(pageIndex < maxSize) { List temp = userIds.subList ...
- java 中如何实现多进程_在Java中可以使用哪些方法来实现Java的多进程运行模式?...
在Java中我们可以使用两种方法来实现这种要求.最简单的方法就是通过Runtime中的exec方法执行java classname.如果执行成功,这个方法返回一个Process对象,如果执行失败,将抛 ...
- java 异步调用方法_乐字节Java编程之方法、调用、重载、递归
一.概述 方法是指人们在实践过程中为达到一定目的和效果所采取的办法.手段和解决方案. 所谓方法,就是解决一类问题的代码的有序组合,是一个功能模块.编程语言中的方法是组合在一起来执行操作语句的集合.例如 ...
- java static修饰方法_浅析Java中static修饰符
1.概述 static关键字的中文意思是静态的,该修饰符可以修饰字段.方法.内部类.使用该关键字修饰的内容,在面向对象中static修饰的内容是隶属于类,而不是直接隶属于对象的,所以static修饰的 ...
- java 重写方法 访问权限_为何Java中子类重写方法的访问权限不能低于父类中权限(内含里氏替换原则)...
为何Java中子类重写方法的访问权限不能低于父类中权限 因为 向上转型及Java程序设计维护的原因 例: 假设一个父类A 拥有的方法public void setXXX(){}可以被其他任意对象调用这 ...
- python脚本怎么使用_在Python中使用next()方法操作文件的教程
next()方法当一个文件被用作迭代器,典型例子是在一个循环中被使用,next()方法被反复调用.此方法返回下一个输入行,或引发StopIteration异常EOF时被命中. 与其它文件的方法,如Re ...
最新文章
- dingo php,用laravel dingo/api创建简单的api
- SpringBoot获取ApplicationContext
- 使用ActiveMQ支持Spring Integration路由
- 【渝粤教育】电大中专学前儿童科学教育 (5)作业 题库
- Linux版APP超级签名分发系统源码
- 怎样成为一名A“.NET研究”ndroid开发者
- 保证一致性吗_谈了千百遍的缓存数据一致性问题
- js和jquery获取父级元素、子级元素、兄弟元素的方法{转}
- 欢迎来到,数据库联盟!
- 一种边播边下的播放策略
- Real-Time Rendering——16.1 Sources of Three-Dimensional Data三维数据的来源
- 金蝶系统安装后怎么连服务器,金蝶安装在云服务器上怎么连接
- 2022最新 B站PC端下载视频方法
- 总结输入阻抗和输出阻抗
- Twitter OAuth1.0认证过程
- Halcon学习之缺陷检测-凸点检测
- laravel seeder factory填充数据
- 如何解决苹果M1处理器Mac翻车问题
- DATE_ADD() 函数使用
- 小米电视是鸿蒙系统吗,搭载鸿蒙系统!华为正式发布荣耀智慧屏 小米电视迅速升级取消开机广告...