XML中HttpRequest最新替代技術(shù)Fetch怎么用

這篇文章給大家分享的是有關(guān)XML中HttpRequest最新替代技術(shù)Fetch怎么用的內(nèi)容。小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過(guò)來(lái)看看吧。

創(chuàng)新互聯(lián)主要從事成都做網(wǎng)站、網(wǎng)站建設(shè)、外貿(mào)營(yíng)銷(xiāo)網(wǎng)站建設(shè)、網(wǎng)頁(yè)設(shè)計(jì)、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)永德,10多年網(wǎng)站建設(shè)經(jīng)驗(yàn),價(jià)格優(yōu)惠、服務(wù)專業(yè),歡迎來(lái)電咨詢建站服務(wù):18982081108

在 Web 應(yīng)用中，JavaScript 通過(guò) XMLHttpRequest (XHR)來(lái)執(zhí)行異步請(qǐng)求，這是一種有效改進(jìn)頁(yè)面通信的技術(shù)，當(dāng)我們談及Ajax技術(shù)的時(shí)候，通常意思就是基于 XMLHttpRequest 的 Ajax。雖說(shuō) Ajax 很有用，但它不是最佳 API，它在設(shè)計(jì)上不符合職責(zé)分離原則，將輸入、輸出和用事件來(lái)跟蹤的狀態(tài)混雜在一個(gè)對(duì)象里。而且，基于事件的模型與現(xiàn)在 JavaScript 流行的 Promise 以及基于生成器的異步編程模型相背馳。本文將要介紹的內(nèi)容則是XMLHttpRequest 的最新替代技術(shù)—— Fetch API， 它是 W3C 的正式標(biāo)準(zhǔn)。

兼容性

在介紹之前，先看看目前主流瀏覽器對(duì) Fetch API 的支持情況：

Fetch 的支持目前還處于早期的階段，在 Firefox 39 以上，和 Chrome 42 以上都被支持了。

如果你現(xiàn)在就想使用它，還可以用 Fetch Polyfil，用于支持那些還未支持 Fetch 的瀏覽器。

在使用 Fetch 之前，也可以對(duì)其進(jìn)行功能性檢測(cè)：

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

簡(jiǎn)單的fetching示例

在 Fetch API 中，最常用的就是 fetch() 函數(shù)。它接收一個(gè)URL參數(shù)，返回一個(gè) promise 來(lái)處理 response。response 是一個(gè) Response 對(duì)象：

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() 接受第二個(gè)可選參數(shù)，一個(gè)可以控制不同配置的 init 對(duì)象。如果是提交一個(gè) POST 請(qǐng)求，代碼如下：

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用于檢測(cè)請(qǐng)求是否成功
    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!");
});

如果遇到網(wǎng)絡(luò)故障，fetch() promise 將會(huì) reject，帶上一個(gè) TypeError 對(duì)象。想要精確的判斷 fetch() 是否成功，需要包含 promise resolved 的情況，此時(shí)再判斷 Response.ok 是不是為 true。

Fetch 實(shí)現(xiàn)了四個(gè)接口：GlobalFetch、Headers、Request 和 Response。GloabaFetch 就只包含了一個(gè) fetch 方法用于獲取網(wǎng)絡(luò)資源，其它三個(gè)直接對(duì)應(yīng)了相應(yīng)的 HTTP 概念。此外，在 request/reponse 中，還混淆了 Body。

Headers

Headers 接口允許定義 HTTP 的請(qǐng)求頭(Request.headers)和響應(yīng)頭(Response.headers)。一個(gè) Headers 對(duì)象是一個(gè)簡(jiǎn)單的多名值對(duì)：

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

也可以傳一個(gè)多維數(shù)組或者對(duì)象字面量：

myHeaders = new Headers({
  "Content-Type": "text/plain",
  "Content-Length": 
content.length.toString(),
  "X-Custom-Header": 
"ProcessThisImmediately",
});

此外，Headers 接口提供了 set ，delete 等 API 用于檢索其內(nèi)容：

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 中使用，但相對(duì)于 XHR，其本身提供了非常方便的操作 Headers 的 API。

出于安全原因，有些 header 字段的設(shè)置僅能通過(guò) User Agent 實(shí)現(xiàn)，不能通過(guò)編程設(shè)置：請(qǐng)求頭禁置字段 和 響應(yīng)頭禁置字段。

如果使用了一個(gè)不合法的 HTTP Header 屬性名或者寫(xiě)入一個(gè)不可寫(xiě)的屬性，Headers 的方法通常都拋出 TypeError 異常：

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

最佳實(shí)踐是在使用之前檢查 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 請(qǐng)求中被發(fā)送或者在 response 請(qǐng)求中被接收，并且規(guī)定了哪些參數(shù)是可寫(xiě)的，Headers 對(duì)象有一個(gè)特殊的 guard 屬性。這個(gè)屬性沒(méi)有暴露給 Web，但是它影響到哪些內(nèi)容可以在 Headers 對(duì)象中被改變。

可能的值如下：

none：默認(rèn)的

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 接口定義了通過(guò)HTTP請(qǐng)求資源的request格式，一個(gè)簡(jiǎn)單請(qǐng)求構(gòu)造如下：

var req = new 
Request("/index.html");
console.log(req.method); // "GET"
console.log(req.url); // 
"http://example.com/index.html"
console.log(req.headers); 
//請(qǐng)求頭

和 fetch() 一樣，Request 接受第二個(gè)可選參數(shù)，一個(gè)可以控制不同配置的 init 對(duì)象：

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 屬性用來(lái)決定是否允許跨域請(qǐng)求，以及哪些response 屬性可讀。mode 可選的屬性值：

same-origin：請(qǐng)求遵循同源策略

no-cors: 默認(rèn)值，允許來(lái)自cdn的腳本、其他域的圖片和其他一些跨域資源（前提條件是 method 只能是HEAD,GET或者POST）

cors ：允許跨域，請(qǐng)求遵循 CROS協(xié)議

credentials 枚舉屬性決定了cookies 是否能跨域得到，這與 XHR 的 withCredentials 標(biāo)志相同，但是只有三個(gè)值，分別是omit（默認(rèn)）,same-origin以及include。

Response

Response 實(shí)例是在 fentch() 處理完 promises 之后返回的，它的實(shí)例也可用通過(guò) JavaScript 來(lái)創(chuàng)建, 但只有在 ServiceWorkers 中才真正有用。當(dāng)使用 respondWith() 方法并提供了一個(gè)自定義的response來(lái)接受request時(shí):

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

Response() 構(gòu)造方法接受兩個(gè)可選參數(shù)—response的數(shù)據(jù)體和一個(gè)初始化對(duì)象(與 Request() 所接受的init參數(shù)類似.)

最常見(jiàn)的response屬性有:

Response.status — 整數(shù)(默認(rèn)值為200) 
為response的狀態(tài)碼.
Response.statusText — 
字符串(默認(rèn)值為OK),該值與HTTP狀態(tài)碼消息對(duì)應(yīng).
Response.ok — 如上所示, 
該屬性是來(lái)檢查response的狀態(tài)是否在200-299(包括200,299)這個(gè)范圍內(nèi).該屬性返回一個(gè)Boolean值.
Response.headers — 響應(yīng)頭
Response.type — 響應(yīng)類型，如：basic/ cors 
/error

Body

Request 和 Response 都實(shí)現(xiàn)了 Body 接口，在請(qǐng)求過(guò)程中，二者都會(huì)攜帶 Body，其可以是以下任何一種類型的實(shí)例：

ArrayBuffer
ArrayBufferView
Blob/file
URLSearchParams
FormData

此外，Request 和 Response 都為他們的body提供了以下方法，這些方法都返回一個(gè)Promise對(duì)象:

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

感謝各位的閱讀！關(guān)于“XML中HttpRequest最新替代技術(shù)Fetch怎么用”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！

網(wǎng)頁(yè)標(biāo)題：XML中HttpRequest最新替代技術(shù)Fetch怎么用
文章來(lái)源：http://m.jiaotiyi.com/article/gsdecs.html