Javascript 笔记一：Fetch

Fetch API

参考： https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

最简单的使用方法：

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

这是最简单的使用方法，fetch只需要带一个参数，就是你想要访问的url地址，这里是’flowers.jpg’。看到then这个关键字，就知道fetch返回的是一个promise。如果一切正常，在then里面可以获得它的response，然后就可以对它做一系列的操作。

带参数的使用方法：

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

fetch 可以接受第二个参数用来进行初始化，细节可以参考它的文档。从这个例子里面，可以看到http方法和headers可以通过第二个参数来设置。

fetch 是否成功：

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

只有在没有网络的情况下，才会抛出异常。而返回结果是否正确，则可以通过response.ok来进行判断。

HTTP参考资料：

https://developer.mozilla.org/en-US/docs/Web/HTTP
https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers
https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods