旗下导航:搜·么
当前位置:网站首页 > XML教程 > 正文

XML Http Request最新替换手艺—— Fetch【XML教程】,XML,Request,Fetch

作者:搜教程发布时间:2019-11-27分类:XML教程浏览:69评论:0


导读:在Web运用中,JavaScript经由过程XMLHttpRequest(XHR)来实行异步要求,这是一种有效革新页面通讯的手艺,当我们谈及Ajax手艺的时刻,一般意义就...
在 Web 运用中,JavaScript 经由过程 XMLHttpRequest (XHR)来实行异步要求,这是一种有效革新页面通讯的手艺,当我们谈及Ajax手艺的时刻,一般意义就是基于 XMLHttpRequest 的 Ajax。虽然说 Ajax 很有效,但它不是最好 API,它在设想上不符合职责星散准绳,将输入、输出和用事宜来跟踪的状况殽杂在一个对象里。而且,基于事宜的模子与如今 JavaScript 盛行的 Promise 以及基于生成器的异步编程模子相背驰。本文将要引见的内容则是XMLHttpRequest 的最新替换手艺—— Fetch API, 它是 W3C 的正式规范。

兼容性

在引见之前,先看看现在主流浏览器对 Fetch API 的支撑状况:

Fetch 的支撑现在还处于初期的阶段,在 Firefox 39 以上,和 Chrome 42 以上都被支撑了。


假如你如今就想运用它,还能够用 Fetch Polyfil,用于支撑那些还未支撑 Fetch 的浏览器。


在运用 Fetch 之前,也能够对其举行功能性检测:

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

简朴的fetching示例


在 Fetch API 中,最经常使用的就是 fetch() 函数。它吸收一个URL参数,返回一个 promise 来处置惩罚 response。response 是一个 Response 对象:

fetch("/data.json").then(function(res) 
{
  // res instanceof Response == 
true.
  if (res.ok) {
    res.json().then(function(data) {
      console.log(data.entries);
    });
  } else {
    console.log("Looks like the response wasn't 
perfect, got status", res.status);
  }
}, function(e) {
  console.log("Fetch failed!", e);
});


fetch() 接收第二个可选参数,一个能够掌握差别设置的 init 对象。假如是提交一个 POST 要求,代码以下:

fetch("http://www.example.org/submit.php", 
{
  method: "POST",
  headers: {
    "Content-Type": 
"application/x-www-form-urlencoded"
  },
  body: 
"firstName=Nikhil&favColor=blue&password=easytoguess"
}).then(function(res) {
  if (res.ok) {
    //res.ok用于检测要求是不是胜利
    console.log("Perfect! Your settings are 
saved.");
  } else if (res.status == 401) {
    console.log("Oops! You are not 
authorized.");
  }
}, function(e) {
  console.log("Error submitting 
form!");
});

假如碰到网络故障,fetch() promise 将会 reject,带上一个 TypeError 对象。想要准确的推断 fetch() 是不是胜利,须要包含 promise resolved 的状况,此时再推断 Response.ok 是不是是为 true。


Fetch 完成了四个接口:GlobalFetch、Headers、Request 和 Response。GloabaFetch 就只包含了一个 fetch 要领用于猎取网络资本,别的三个直接对应了相应的 HTTP 观点。另外,在 request/reponse 中,还殽杂了 Body。

Headers

Headers 接口许可定义 HTTP 的要求头(Request.headers)和相应头(Response.headers)。一个 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",
});

另外,Headers 接口供应了 set ,delete 等 API 用于检索其内容:

console.log(reqHeaders.has("Content-Type")); // 
true
console.log(reqHeaders.has("Set-Cookie")); // 
false
reqHeaders.set("Content-Type", 
"text/html");
reqHeaders.append("X-Custom-Header", 
"AnotherValue");
console.log(reqHeaders.get("Content-Length")); 
// 11
console.log(reqHeaders.getAll("X-Custom-Header")); // 
["ProcessThisImmediately", "AnotherValue"]
reqHeaders.delete("X-Custom-Header");
console.log(reqHeaders.getAll("X-Custom-Header")); // 
[]


虽然有些操纵仅在 ServiceWorkers 中运用,但相对于 XHR,其自身供应了非常轻易的操纵 Headers 的 API。


出于平安缘由,有些 header 字段的设置仅能经由过程 User Agent 完成,不能经由过程编程设置:要求头禁置字段 和 相应头禁置字段。


假如运用了一个不合法的 HTTP Header 属性名或许写入一个不可写的属性,Headers 的要领一般都抛出 TypeError 非常:

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

最好实践是在运用之前搜检 content type 是不是准确,比方:

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

因为 Headers 能够在 request 要求中被发送或许在 response 要求中被吸收,而且划定了哪些参数是可写的,Headers 对象有一个特别的 guard 属性。这个属性没有暴露给 Web,然则它影响到哪些内容能够在 Headers 对象中被转变。


能够的值以下:


none:默许的

r

equest:从 request 中取得的 
headers(Request.headers)只读
request-no-cors:从差别域(Request.mode no-cors)的 
request 中取得的 headers 只读
response:从 response 中取得的 
headers(Response.headers)只读
immutable:在 ServiceWorkers 中最经常使用的,一切的 headers 
都只读


Request


Request 接口定义了经由过程HTTP要求资本的request花样,一个简朴要求组织以下:

var req = new 
Request("/index.html");
console.log(req.method); // "GET"
console.log(req.url); // 
"http://example.com/index.html"
console.log(req.headers); 
//要求头

和 fetch() 一样,Request 接收第二个可选参数,一个能够掌握差别设置的 init 对象:

var myHeaders = new Headers();
var myInit = { method: 'GET',
               headers: myHeaders,
               mode: 'cors',
               cache: 'default' ,
               credentials: true,
               body: "image data"};
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;
});


mode 属性用来决议是不是许可跨域要求,以及哪些response 属性可读。mode 可选的属性值:

same-origin:要求遵照同源战略

no-cors: 默许值,许可来自CDN的剧本、其他域的图片和其他一些跨域资本(前提条件是 method 只能是HEAD,GET或许POST)

cors :许可跨域,要求遵照 CROS协定

credentials 罗列属性决议了cookies 是不是能跨域获得,这与 XHR 的 withCredentials 标志雷同,然则只要三个值,分别是omit(默许),same-origin以及include。

Response

Response 实例是在 fentch() 处置惩罚完 promises 以后返回的,它的实例也可用经由过程 JavaScript 来建立, 但只要在 ServiceWorkers 中才真正有效。当运用 respondWith() 要领并供应了一个自定义的response来接收request时:

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


Response() 组织要领接收两个可选参数—response的数据体和一个初始化对象(与 Request() 所接收的init参数相似.)

最常见的response属性有:

Response.status — 整数(默许值为200) 
为response的状况码.
Response.statusText — 
字符串(默许值为OK),该值与HTTP状况码音讯对应.
Response.ok — 如上所示, 
该属性是来搜检response的状况是不是在200-299(包含200,299)这个范围内.该属性返回一个Boolean值.
Response.headers — 相应头
Response.type — 相应范例,如:basic/ cors 
/error

Body

Request 和 Response 都完成了 Body 接口,在要求过程当中,两者都邑照顾 Body,其能够是以下任何一种范例的实例:

ArrayBuffer
ArrayBufferView
Blob/file
URLSearchParams
FormData

另外,Request 和 Response 都为他们的body供应了以下要领,这些要领都返回一个Promise对象:

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


以上就是XML Http Request最新替换手艺—— Fetch 的内容,更多相关内容请关注ki4网(www.ki4.cn)!

标签:XMLRequestFetch


欢迎 发表评论: