首页 > 代码库 > fetch()的用法

fetch()的用法

发起获取资源请求的我们一般都会用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 = http://www.mamicode.com/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 = http://www.mamicode.com/objectURL;>

  URL.createObjectURL()静态方法会创建一个DOMString,她的URL表示参数中的对象。这个URL的声明周期和创建她的窗口中的document绑定。这个新的URL对象表示着指定的FILR对象或者是Blob对象

语法: objectURL = URL.createObjectURL(blob)

  参数:用来创建URL的File对象或者是Blob对象

  每次调用createObjectURL()方法时,都会创建一个新的URL对象,即使已经用相同的对象作为参数创建过。当不再使用这些URL对象时,每个对象必须通过调用 URL.revokeObjectURL() 方法来释放。浏览器会在文档退出的时候自动释放它们,但是为了获得最佳性能和内存使用状况,你应该在安全的时机主动释放掉它们。

 

 

  

 

fetch()的用法