fetch API

一.什麼是fetch?

　　fetch的做用相似於XMLHttpRequet的做用,用於異步請求網絡,其提供的API更加的完善.

　　fetch提供了Request和Response對象的定義,用於自定義網絡請求和處理響應消息,兼容性

　　還不是很強.

二.如何使用fetch?

　　fetch提供一系列的API,以下:

　　GlobalFetch:

　　　　包括fetch()方法用於獲取資源

　　Headers:

　　　　表示response/request的消息頭

　　Request:

　　　　用於請求資源

　　Response:

　　　　一個request的響應消息

　　Body

　　　　消息的內容

三.開始使用fetch

　　1.檢查兼容性

　　　　

1 if(self.fetch) {
2     // run my fetch request here
3 } else {
4     // do something with XMLHttpRequest?
5 }

View Code

 　　2.發送一個請求

　　

 1 var myImage = document.querySelector('img');
 2 
 3 fetch('flowers.jpg')
 4 .then(function(response) {
 5   return response.blob();
 6 })
 7 .then(function(myBlob) {
 8   var objectURL = URL.createObjectURL(myBlob);
 9   myImage.src = objectURL;
10 });

View Code

 　　這裏是獲取圖片,並插入到相應位置

　　3.用於配置請求的一些的選項

　　

 1 var myHeaders = new Headers();
 2 
 3 var myInit = { method: 'GET',
 4                headers: myHeaders,
 5                mode: 'cors',
 6                cache: 'default' };
 7 
 8 fetch('flowers.jpg',myInit)
 9 .then(function(response) {
10   return response.blob();
11 })
12 .then(function(myBlob) {
13   var objectURL = URL.createObjectURL(myBlob);
14   myImage.src = objectURL;
15 });

View Code

　　4.檢查請求是否成功

　　

 1 fetch('flowers.jpg').then(function(response) {
 2   if(response.ok) {
 3     response.blob().then(function(myBlob) {
 4       var objectURL = URL.createObjectURL(myBlob);
 5       myImage.src = objectURL;
 6     });
 7   } else {
 8     console.log('Network response was not ok.');
 9   }
10 })
11 .catch(function(error) {
12   console.log('There has been a problem with your fetch operation: ' + error.message);
13 });

View Code

　　5.能夠自定義一個Request對象

　　

 1 var myHeaders = new Headers();
 2 
 3 var myInit = { method: 'GET',
 4                headers: myHeaders,
 5                mode: 'cors',
 6                cache: 'default' };
 7 
 8 var myRequest = new Request('flowers.jpg',myInit);
 9 
10 fetch(myRequest,myInit)
11 .then(function(response) {
12   return response.blob();
13 })
14 .then(function(myBlob) {
15   var objectURL = URL.createObjectURL(myBlob);
16   myImage.src = objectURL;
17 });

View Code

　　6.Headers消息頭

　　根據本身的須要設置消息頭

　　

1 var content = "Hello World";
2 var myHeaders = new Headers();
3 myHeaders.append("Content-Type", "text/plain");
4 myHeaders.append("Content-Length", content.length.toString());
5 myHeaders.append("X-Custom-Header", "ProcessThisImmediately");

View Code

　　另外一種方式經過構造 函數的形式:

　　

1 myHeaders = new Headers({
2   "Content-Type": "text/plain",
3   "Content-Length": content.length.toString(),
4   "X-Custom-Header": "ProcessThisImmediately",
5 });

View Code

　　也能夠查詢或者刪除

　　

 1 console.log(myHeaders.has("Content-Type")); // true
 2 console.log(myHeaders.has("Set-Cookie")); // false
 3 myHeaders.set("Content-Type", "text/html");
 4 myHeaders.append("X-Custom-Header", "AnotherValue");
 5  
 6 console.log(myHeaders.get("Content-Length")); // 11
 7 console.log(myHeaders.getAll("X-Custom-Header")); // ["ProcessThisImmediately", "AnotherValue"]
 8  
 9 myHeaders.delete("X-Custom-Header");
10 console.log(myHeaders.getAll("X-Custom-Header")); // [ ]

View Code

　　若是消息頭的類型不存在會拋出類型異常,全部使用以前能夠先檢查

 1 var myResponse = Response.error();
 2 try {
 3   myResponse.headers.set("Origin", "http://mybank.com");
 4 } catch(e) {
 5   console.log("Cannot pretend to be a bank!");
 6 }
 7 
 8 
 9 
10 
11 fetch(myRequest).then(function(response) {
12   var contentType = response.headers.get("content-type");
13   if(contentType && contentType.indexOf("application/json") !== -1) {
14     return response.json().then(function(json) {
15       // process your JSON further
16     });
17   } else {
18     console.log("Oops, we haven't got JSON!");
19   }
20 });

View Code

　　7.監控

　　　　可能監控的一些值

　　　　

1 none: default.
2 request: guard for a headers object obtained from a request (Request.headers).
3 request-no-cors: guard for a headers object obtained from a request created with Request.mode no-cors.
4 response: guard for a Headers obtained from a response (Response.headers).
5 immutable: Mostly used for ServiceWorkers; renders a headers object read-only.

View Code

　　8.Response objects

　　　　用於當 fetch()返回的pormise是resolved時的操做.

　　　　

1 var myBody = new Blob();
2 
3 addEventListener('fetch', function(event) {
4   event.respondWith(new Response(myBody, {
5     headers: { "Content-Type" : "text/plain" }
6   });
7 });

View Code

　　一些屬性:

　　

1 Response.status — An integer (default value 200) containing the response status code.
2 Response.statusText — A string (default value "OK"),which corresponds to the HTTP status code message.
3 Response.ok — seen in use above, this is a shorthand for checking that status is in the range 200-299 inclusive. This returns a Boolean.

View Code

　　9.Body

　　消息內容

　　request或者response均可能有body data,可能有下面的一些格式:

　　

1 ArrayBuffer
2 ArrayBufferView (Uint8Array and friends)
3 Blob/File
4 string
5 URLSearchParams
6 FormData

View Code

　　定義一下一些方法去提取body(在Request和Response中被實現)

　　

1 arrayBuffer()
2 blob()
3 json()
4 text()
5 formData()

View Code

    文檔