查看: 50|回复: 0

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

发表于 2018-7-26 11:02:50
本篇文章扣丁学堂HTML5培训小编和大家分享一下h5中的fetch方法,对HTML5感兴趣的小伙伴就随着小编一起来了解一下吧。

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
})
以上就是扣丁学堂HTML5在线学习给大家分享的h5中的fetch方法解读,希望对小伙伴所有帮助。想要了解更多内容的小伙伴可以登录扣丁学堂官网咨询。扣丁学堂是专业的HTML5培训班,不仅有专业的老师和与时俱进的课程体系,还有大量的HTML5视频教程供学员观看学习哦。扣丁学堂H5技术交流群:559883758。

文章转载自:扣丁学堂http://www.codingke.com/



回复

使用道具 举报