未加星标

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

字体大小 | |
[前端(html5) 所属分类 前端(html5) | 发布者 店小二04 | 时间 | 作者 红领巾 ] 0人收藏点击收藏

Fetch概念

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

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

当然如果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.)

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

分页:12
转载请注明
本文标题:关于h5中的fetch方法解读(小结)
本站链接:http://www.codesec.net/view/569664.html
分享请点击:


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(html5) | 评论(0) | 阅读(19)