fetch是的ajax請求的新寫法
一、fetch基本語法：
fetch(url, options).then(function(response) {
  // handle HTTP response
}, function(error) {
  // handle network error
})




具體案例：


//相容包
require('babel-polyfill')
require('es6-promise').polyfill()


import 'whatwg-fetch'


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


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




GET請求：


請求html檔案：
fetch('/users.html')
  .then(function(response) {
    return response.text()
  }).then(function(body) {
    document.body.innerHTML = body
 })


 請求image:


 var myImage = document.querySelector('img');


fetch('flowers.jpg')
  .then(function(response) {
    return response.blob();
  })
  .then(function(myBlob) {
    var objectURL = URL.createObjectURL(myBlob);
    myImage.src = objectURL;
  });




  請求json檔案：


  fetch(url)
  .then(function(response) {
    return response.json();
  }).then(function(data) {
    console.log(data);
  }).catch(function(e) {
    console.log("Oops, error");
});




使用 ES6 的 箭頭函式 後：




fetch(url)
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(e => console.log("Oops, error", e))


response的資料


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)
})