资讯专栏INFORMATION COLUMN

关于h5中的fetch方法解读

YPHP / 3498人阅读

摘要:前言既然是的新方法肯定就有一些比较的浏览器不支持了对于那些不支持此方法的浏览器就需要额外的添加一个链接用法抓取这里返回的是一个对象不支持的浏览器需要相应的或通过等转码器转码后在执行这里是请求的请求体这里获取选择的文件内容注意事项和的

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的结果

Additional
如果不出意外的话,请求的url和响应的url是相同的,但是如果像redirect这种操作的
话response.url可能就会不一样.在XHR时,redirect后的response.url可能就不太准
确了,需要设置下:response.headers["X-Request-URL"] = request.url
适用于( Firefox < 32, Chrome < 37, Safari, or IE.)





文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/89724.html

相关文章

  • 即将立秋的《课多周刊》(第2期)

    摘要:即将立秋的课多周刊第期我们的微信公众号,更多精彩内容皆在微信公众号,欢迎关注。若有帮助,请把课多周刊推荐给你的朋友,你的支持是我们最大的动力。课多周刊机器人运营中心是如何玩转起来的分享课多周刊是如何运营并坚持下来的。 即将立秋的《课多周刊》(第2期) 我们的微信公众号:fed-talk,更多精彩内容皆在微信公众号,欢迎关注。 若有帮助,请把 课多周刊 推荐给你的朋友,你的支持是我们最大...

    ruicbAndroid 评论0 收藏0
  • 即将立秋的《课多周刊》(第2期)

    摘要:即将立秋的课多周刊第期我们的微信公众号,更多精彩内容皆在微信公众号,欢迎关注。若有帮助,请把课多周刊推荐给你的朋友,你的支持是我们最大的动力。课多周刊机器人运营中心是如何玩转起来的分享课多周刊是如何运营并坚持下来的。 即将立秋的《课多周刊》(第2期) 我们的微信公众号:fed-talk,更多精彩内容皆在微信公众号,欢迎关注。 若有帮助,请把 课多周刊 推荐给你的朋友,你的支持是我们最大...

    MRZYD 评论0 收藏0
  • Seajs源码解读

    摘要:如果这个模块的时候没有设置,就表示是个匿名模块,那怎么才能与之前发起请求的那个相匹配呢这里就有了一个全局变量,先将元数据放入这个对象。模块加载完毕的回调保存元数据到匿名模块,为请求的不管是不是匿名模块,最后都是通过方法,将元数据存入到中。 近几年前端工程化越来越完善,打包工具也已经是前端标配了,像seajs这种老古董早已停止维护,而且使用的人估计也几个了。但这并不能阻止好奇的我,为了了...

    bigdevil_s 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<