XML Http リクエストの最新の代替テクノロジー - フェッチ

Web アプリケーションでは、JavaScript は XMLHttpRequest を使用します (XHR) は、ページ通信を効果的に改善するテクノロジです。Ajax テクノロジについて話すときは、通常、XMLHttpRequest に基づく Ajax を意味します。それでも Ajax は便利ですが、最良の API ではありません。職務の分離、入力、出力、およびイベントで追跡される状態を単一のオブジェクトに混合するという原則に従うように設計されていません。さらに、イベントベースのモデルは、 JavaScript は、人気のある Promise やジェネレーターベースの非同期プログラミング モデルとは対立します。この記事で紹介するのは、XMLHttpRequest に代わる最新の技術です—— W3C の公式標準である Fetch API。

互換性

紹介する前に、主流のブラウザでの Fetch API の現在のサポートを見てみましょう:

Fetch のサポートは、Firefox 39 以降と Chrome 42 ではまだ初期段階にあります。 上記はすべてサポートされています。

今すぐ使用したい場合は、Fetch Polyfil を使用して、まだ Fetch をサポートしていないユーザーをサポートすることもできます。 ブラウザ。

Fetch を使用する前に、機能テストを実行することもできます:

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

簡単なフェッチの例

Fetch API で最も一般的に使用される関数は fetch() 関数です。 URL パラメータを受け取り、 対応することを約束します。応答は 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() は、2 番目のオプションのパラメーターである、さまざまな構成を制御できる 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 は拒否されます。 TypeError オブジェクト。 fetch() が成功したかどうかを正確に判断するには、Promise が解決された状況を含めて、この時点で Response.ok を決定する必要があります。 それは本当です。

Fetch は、GlobalFetch、Headers、Request、および 4 つのインターフェイスを実装します。 応答。 GloabaFetch には、ネットワーク リソースを取得するためのフェッチ メソッドが 1 つだけ含まれており、他の 3 つは対応する HTTP の概念に直接対応しています。さらに、 リクエスト/レスポンスではボディも混乱します。

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 インターフェイスは、設定、削除、その他の 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 自体は、ヘッダーを操作するための非常に便利な API を提供します。

セキュリティ上の理由から、一部のヘッダーフィールドはユーザーエージェントを介してのみ設定できます 実装では、プログラムで設定することはできません: リクエスト ヘッダーの禁止フィールドとレスポンス ヘッダーの禁止フィールド。

不正なHTTPヘッダー属性名が使用されたり、書き込み不可能な属性が書き込まれた場合、ヘッダー 通常、メソッドは TypeError 例外をスローします:

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

ベスト プラクティスは、次のように、使用前にコンテンツ タイプが正しいかどうかを確認することです:

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 オブジェクトには特別なガード属性があります。このプロパティは Web には公開されませんが、どのようなコンテンツを公開できるかに影響します。 ヘッダー オブジェクトが変更されます。

可能な値は次のとおりです:

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 経由でリソースをリクエストするためのリクエスト形式を定義します。単純なリクエストは次のように構成されます:

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() と同じで、リクエストは 2 番目のオプションのパラメータである、さまざまな設定を制御できる 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 属性は、クロスドメイン要求が許可されるかどうか、およびどの応答属性が読み取り可能であるかを決定するために使用されます。モード オプションの属性値:

same-origin: リクエストは同一オリジンポリシーに従います

no-cors: デフォルト値、CDN からのスクリプト、他のドメインからのイメージ、およびその他のいくつかのクロスドメインリソースを許可します (前提条件は メソッドは HEAD、GET、または POST のみです)

cors: クロスドメインが許可され、リクエストは CROS プロトコルに従います

credentials 列挙属性は、ドメイン間で Cookie を取得できるかどうかを決定します。これは XHR と一致します withCredentials フラグも同じですが、値は 3 つだけです。つまり、omit (デフォルト)、same-origin、および include です。

Response

Response インスタンスは fentch() Promise によって処理されます 後で返されるインスタンスは JavaScript 経由で作成することもできますが、実際に役立つのは ServiceWorkers 内でのみです。 responseWith()を使用する場合 メソッドを呼び出し、リクエストを受け入れるためのカスタム応答を提供します:

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

Response() コンストラクターは、応答データ本体と初期化オブジェクト ( Request() によって受け入れられる初期パラメータは似ています。)

最も一般的な応答属性は次のとおりです:

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 インターフェイスを実装しており、どちらもリクエスト プロセス中に伝達されます。 本体。次のいずれかのタイプのインスタンスになります:

ArrayBuffer
ArrayBufferView
Blob/file
URLSearchParams
FormData

此外，Request 和 Response 都为他们的body提供了以下方法，这些方法都返回一个Promise对象:

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

 以上就是XML Http Request最新替代技术—— Fetch 的内容，更多相关内容请关注PHP中文网（www.php.cn）！