fetch API

一.什么是fetch?

　　fetch的作用类似于XMLHttpRequet的作用,用于异步请求网络,其提供的API更加的完善.

　　fetch提供了Request和Response对象的定义,用于自定义网络请求和处理响应消息,兼容性

　　还不是很强.

二.如何使用fetch?

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

　　GlobalFetch:

　　　　包括fetch()方法用于获取资源

　　Headers:

　　　　表示response/request的消息头

　　Request:

　　　　用于请求资源

　　Response:

　　　　一个request的响应消息

　　Body

　　　　消息的内容

三.开始使用fetch

　　1.检查兼容性

　　　　

 if(self.fetch) {
     // run my fetch request here
 } else {
     // do something with XMLHttpRequest?
 }

　　2.发送一个请求

　　

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

　　这里是获取图片,并插入到相应位置

　　3.用于配置请求的一些的选项

　　

 var myHeaders = new Headers();

 var myInit = { method: 'GET',
                headers: myHeaders,
                mode: 'cors',
                cache: 'default' };

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

　　4.检查请求是否成功

　　

 fetch('flowers.jpg').then(function(response) {
   if(response.ok) {
     response.blob().then(function(myBlob) {
       var objectURL = URL.createObjectURL(myBlob);
       myImage.src = objectURL;
     });
   } else {
     console.log('Network response was not ok.');
   }
 })
 .catch(function(error) {
   console.log('There has been a problem with your fetch operation: ' + error.message);
 });

　　5.可以自定义一个Request对象

　　

 var myHeaders = new Headers();

 var myInit = { method: 'GET',
                headers: myHeaders,
                mode: 'cors',
                cache: 'default' };

 var myRequest = new Request('flowers.jpg',myInit);

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

　　6.Headers消息头

　　根据自己的需要设置消息头

　　

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

　　另一种方式通过构造 函数的形式:

　　

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

　　也可以查询或者删除

　　

 console.log(myHeaders.has("Content-Type")); // true
 console.log(myHeaders.has("Set-Cookie")); // false
 myHeaders.set("Content-Type", "text/html");
 myHeaders.append("X-Custom-Header", "AnotherValue");

 console.log(myHeaders.get("Content-Length")); //
 console.log(myHeaders.getAll("X-Custom-Header")); // ["ProcessThisImmediately", "AnotherValue"]

 myHeaders.delete("X-Custom-Header");
 console.log(myHeaders.getAll("X-Custom-Header")); // [ ]

　　如果消息头的类型不存在会抛出类型异常,所有使用之前可以先检查

 var myResponse = Response.error();
 try {
   myResponse.headers.set("Origin", "http://mybank.com");
 } catch(e) {
   console.log("Cannot pretend to be a bank!");
 }

 fetch(myRequest).then(function(response) {
   var contentType = response.headers.get("content-type");
   if(contentType && contentType.indexOf("application/json") !== -1) {
     return response.json().then(function(json) {
       // process your JSON further
     });
   } else {
     console.log("Oops, we haven't got JSON!");
   }
 });

　　7.监控

　　　　可能监控的一些值

　　　　

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

　　8.Response objects

　　　　用于当 fetch()返回的pormise是resolved时的操作.

　　　　

 var myBody = new Blob();

 addEventListener('fetch', function(event) {
   event.respondWith(new Response(myBody, {
     headers: { "Content-Type" : "text/plain" }
   });
 });

　　一些属性:

　　

 Response.status — An integer (default value 200) containing the response status code.
 Response.statusText — A string (default value "OK"),which corresponds to the HTTP status code message.
 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.

　　9.Body

　　消息内容

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

　　

 ArrayBuffer
 ArrayBufferView (Uint8Array and friends)
 Blob/File
 string
 URLSearchParams
 FormData

　　定义一下一些方法去提取body(在Request和Response中被实现)

　　

 arrayBuffer()
 blob()
 json()
 text()
 formData()

文档