fetch()的用法

發起獲取資源請求的咱們通常都會用AJAX技術，最近在學習微信小程序的時候，用到了fetch()方法。

fetch()方法用於發起獲取資源的請求。它返回一個promise，這個promise會在請求響應以後被resolve,並傳回Response對象，基本上在任何場景下只要你想獲取資源，均可以使用fetch()方法，可是如今存在兼容性的問題，查看兼容性：http://caniuse.com/#search=fetch()

當遇到網絡錯誤是，fetch()返回的promise會被reject（阻止），並傳回TypeError;成功的fetch()檢查不只要包括promise被解析，還要包括Response.ok屬性爲true.Http 404狀態並不被認爲是網絡錯誤

一：語法

　　

fetch(input, init).then(function(response) {...})

　　參數：

　　　　input:要獲取的資源，多是字符串（包含要獲取資源的url），也多是Request對象

　　　　init：

　　　　　　method:請求使用的方法，如：POST/GET

　　　　　　headers:請求頭信息，多是字符串，也有多是Header對象

　　　　　　body：請求的body信息：多是 Blod/BufferSource/FormData/URLSearchParam或者是字符串

　　　　　　mode：請求模式：cors /no-cors/same-origin

　　　　　　credentials:請求的credentials

　　　　　　cache:請求的cache模式：default,no-store,reload,no-cache,force-cache ,only-if-cached

　　返回值：一個Promise，解析時傳回Response對象

　　示例1：好比說在百度頁面打開控制檯，

　　輸入：

fetch("https://www.baidu.com").then(function(response){console.log(response)})

　　

示例2：

var myImage = document.querySelector('img');
var myRequest = new Request('flowers.jpg');
fetch(myRequest).then(function(response){
   return response.blob(); 
}).then(function(response){
   var objectURL = URL.createObjectURL(response);
   myImage.src = objectURL;  
})

　　下面的是有init參數的

　　

var myImage = document.querySelector("img");
var myHeaders = new Headers();
myHeaders.append("Content-Type","image/jpeg");

var myInit = {
  method: "GET",
  headers: myHeaders,
  mode: 'cors',
  cache: "default"    
}
var myRequest = new Request("flowers.jpg");

fetch(myRequest, myInit).then(function(response){
   return response.blob(); 
}).then(function(response){
  var objectURL = URL.createObjectURL(response);
  myImage.src = objectURL;
})

　　URL.createObjectURL()靜態方法會建立一個DOMString，她的URL表示參數中的對象。這個URL的聲明週期和建立她的窗口中的document綁定。這個新的URL對象表示着指定的FILR對象或者是Blob對象

語法： objectURL = URL.createObjectURL(blob)

　　參數：用來建立URL的File對象或者是Blob對象

　　每次調用createObjectURL()方法時，都會建立一個新的URL對象，即便已經用相同的對象做爲參數建立過。當再也不使用這些URL對象時，每一個對象必須經過調用 URL.revokeObjectURL()方法來釋放。瀏覽器會在文檔退出的時候自動釋放它們，可是爲了得到最佳性能和內存使用情況，你應該在安全的時機主動釋放掉它們。