fetch()的用法

Posted 2020-08-21 太阳花0525

发起获取资源请求的我们一般都会用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() 方法来释放。浏览器会在文档退出的时候自动释放它们，但是为了获得最佳性能和内存使用状况，你应该在安全的时机主动释放掉它们。