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")); // 11
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()

    文档