fetch.js

與XMLHttpRequest(XHR)相似，fetch()方法容許你發出AJAX請求。區別在於Fetch API使用Promise，所以是一種簡潔明瞭的API，比XMLHttpRequest更加簡單易用。

fetch("../students.json").then(function(response){ if(response.status!==200){ console.log("存在一個問題，狀態碼爲："+response.status); return; } //檢查響應文本
        response.json().then(function(data){ console.log(data); }); }).catch(function(err){ console.log("Fetch錯誤:"+err); }) 

mode屬性用來決定是否容許跨域請求，以及哪些response屬性可讀。可選的mode屬性值爲 same-origin，no-cors（默認）以及 cores;

• same-origin模式很簡單，若是一個請求是跨域的，那麼返回一個簡單的error，這樣確保全部的請求遵照同源策略
  
• no-cors模式容許來自CDN的腳本、其餘域的圖片和其餘一些跨域資源，可是首先有個前提條件，就是請求的method只能是"HEAD","GET"或者"POST"
• cors模式咱們一般用做跨域請求來從第三方提供的API獲取數據

Response 也有一個type屬性，它的值多是"basic","cors","default","error"或者"opaque";

• "basic": 正常的，同域的請求，包含全部的headers除了"Set-Cookie"和"Set-Cookie2"。
• "cors": Response從一個合法的跨域請求得到， 一部分header和body 可讀。(限定只能在響應頭中看見「Cache-Control」、「Content-Language」、「Content-Type」、「Expires」、「Last-Modified」以及「Progma」)
• "error": 網絡錯誤。Response的status是0，Headers是空的而且不可寫。(當Response是從Response.error()中獲得時，就是這種類型)
• "opaque": Response從"no-cors"請求了跨域資源。依靠Server端來作限制。(將不能查看數據，也不能查看響應狀態，也就是說咱們不能檢查請求成功與否;目前爲止不能在頁面腳本中請求其餘域中的資源)

 

function status(response){ if(response.status>=200 && response.status<300){ return Promise.resolve(response); }else{ return Promise.reject(new Error(response.statusText)); } } function json(response){ return response.json(); } fetch("../students.json",{mode:"cors"})//響應類型「cors」,通常爲「basic」;
.then(status)//能夠連接方法
.then(json) 
.then(function(data){ 
　　console.log("請求成功，JSON解析後的響應數據爲:",data); })
.then(function(response){ 
　　console.log(response.headers.get('Content-Type')); //application/json 
　　console.log(response.headers.get('Date')); //Wed, 08 Mar 2017 06:41:44 GMT  
　　console.log(response.status); //200  
　　console.log(response.statusText); //ok  
　　console.log(response.type); //cors  
　　console.log(response.url); //http://.../students.json })
.catch(function(err){ 
　　console.log("Fetch錯誤:"+err); 
}) 

使用POST方法提交頁面中的一些數據:將method屬性值設置爲post，而且在body屬性值中設置須要提交的數據;

credentials屬性決定了cookies是否能跨域獲得 : "omit"(默認),"same-origin"以及"include";

var url='...'; fetch(url,{ method:"post",//or 'GET'
    credentials: "same-origin",//or "include","same-origin":只在請求同域中資源時成功，其餘請求將被拒絕。
　　headers:{
　　　　"Content-type":"application:/x-www-form-urlencoded:charset=UTF-8"
　　},
　　body:"name=lulingniu&age=40"
})

.then(status) .then(json) //JSON進行解析來簡化代碼 .then(function(data){ console.log("請求成功，JSON解析後的響應數據爲:",data); }) .catch(function(err){ console.log("Fetch錯誤:"+err); });

瀏覽器支持：

目前Chrome 42+, Opera 29+, 和Firefox 39+都支持Fetch。微軟也考慮在將來的版本中支持Fetch。

諷刺的是，當IE瀏覽器終於微響應實現了progress事件的時候，XMLHttpRequest也走到了盡頭。 目前，若是你須要支持IE的話，你須要使用一個polyfill庫。

promises介紹： 

這種寫法被稱爲composing promises, 是 promises 的強大能力之一。每個函數只會在前一個 promise 被調用而且完成回調後調用，而且這個函數會被前一個 promise 的輸出調用；