XML中HttpRequest最新替代技術Fetch怎么用

這篇文章給大家分享的是有關XML中HttpRequest最新替代技術Fetch怎么用的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

在 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中HttpRequest最新替代技術Fetch怎么用”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！