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

fetch概念

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

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

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

下图是跨域访问segment的结果

additional

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

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