JS fetch API

是啥？

fetch API是用来替换XMLHttpRequest对象的

为啥要用？

封装度比XMLHttpRequest要高，fetch就像封装好的$.ajax()。当你不想引jquery/zepto，但又不想自己封装XMLHttpRequest时，就用它咯

兼容性？

fetch

恩，兼容性一般，想使用的话只得引polyfill了， 这里有一个，1.8万颗星。引入后可支持到：Safari 6.1+ 、Internet Explorer 10+

常用操作

基本就是这种调用方式；更多配置项参见这里

fetch(url, {
  method: "POST",
  body: JSON.stringify(data),
  headers: {
    "Content-Type": "application/json"
  },
  credentials: "same-origin"
}).then(function(response) {
  response.status     //=> number 100–599
  response.statusText //=> String
  response.headers    //=> Headers
  response.url        //=> String

  return response.text()
}, function(error) {
  error.message //=> String
})

HTML

fetch('/users.html')
  .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: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    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
})

坑

• 默认不发cookie，若需要，需设置credentials: 'same-origin' // 'include' for CORS
• 对400/500类的HTTP status，不作reject处理，仍是resolve。故需手动处理一下