fetch的用法

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