扣丁学堂HTML5分享h5中的fetch方法解读

2018-07-06 14:43:10

725浏览

本篇文章扣丁学堂

Fetch概念：

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

优化离线体验

保持可扩展性

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

1、前言

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

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

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

})

以上就是扣丁学堂

【关注微信公众号获取更多学习资料】

标签:

扣丁学堂HTML5培训

h5中的fetch方法解读

HTML5培训

HTML5视频教程

HTML5在线课程

HTML5在线学习

HTML5在线视频

HTML5从入门到精通

html5基础教程