XML Http Fordern Sie die neueste alternative Technologie an – Fetch

In Webanwendungen verwendet JavaScript XMLHttpRequest (XHR) zur Durchführung asynchroner Anfragen, einer Technologie, die die Seitenkommunikation effektiv verbessert. Wenn wir über Ajax-Technologie sprechen, meinen wir normalerweise Ajax basierend auf XMLHttpRequest. Obwohl Ajax ist nützlich, aber nicht die beste API. Es ist nicht darauf ausgelegt, das Prinzip der Aufgabentrennung einzuhalten, bei dem Eingabe, Ausgabe und mit Ereignissen verfolgte Zustände in einem einzigen Objekt zusammengefasst werden. Darüber hinaus gibt es mittlerweile ereignisbasierte Modelle JavaScript steht im Widerspruch zu seinen beliebten Promise- und Generator-basierten asynchronen Programmiermodellen. In diesem Artikel wird die neueste alternative Technologie zu XMLHttpRequest vorgestellt. Fetch API, ein offizieller Standard des W3C.

Kompatibilität

Bevor wir es vorstellen, werfen wir einen Blick auf die aktuelle Mainstream-Browser-Unterstützung für die Fetch-API:

Fetch-Unterstützung Es ist noch verfügbar die frühen Stadien, in Firefox 39 und höher und Chrome 42 Alle oben genannten werden unterstützt.

Wenn Sie es jetzt nutzen möchten, können Sie Fetch Polyfil auch verwenden, um diejenigen zu unterstützen, die Fetch noch nicht unterstützen Browser.

Bevor Sie Fetch verwenden, können Sie auch Funktionstests durchführen:

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

Einfaches Abrufbeispiel

In der Fetch-API ist die Funktion fetch() die am häufigsten verwendete Funktion. Es empfängt einen URL-Parameter und gibt einen zurück versprechen, die Antwort zu bearbeiten. Antwort ist ein Antwortobjekt:

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() akzeptiert einen zweiten optionalen Parameter, ein Init-Objekt, das verschiedene Konfigurationen steuern kann. Wenn Sie eine einreichen POST-Anfrage, der Code lautet wie folgt:

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

Wenn ein Netzwerkfehler vorliegt, wird das fetch()-Versprechen mit a abgelehnt TypeError-Objekt. Um genau zu bestimmen, ob fetch() erfolgreich ist, müssen Sie die gelöste Versprechenssituation einbeziehen und dann Response.ok zu diesem Zeitpunkt ermitteln ist wahr.

Fetch implementiert vier Schnittstellen: GlobalFetch, Headers, Request und Antwort. GloabaFetch enthält nur eine Abrufmethode zum Abrufen von Netzwerkressourcen, und die anderen drei entsprechen direkt den entsprechenden HTTP-Konzepten. Darüber hinaus in Bei Anfrage/Antwort ist Body ebenfalls verwirrt.

Header

Header-Schnittstelle ermöglicht die Definition von HTTP Anforderungsheader (Request.headers) und Antwortheader (Response.headers). Ein Headers-Objekt ist ein einfaches Wertepaar mit mehreren Namen:

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

Sie können auch ein mehrdimensionales Array oder Objektliteral übergeben:

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

Darüber hinaus bietet die Headers-Schnittstelle Set-, Lösch- und andere APIs Wird zum Abrufen des Inhalts verwendet:

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")); // 
[]

Während einige Vorgänge nur innerhalb von ServiceWorkers verwendet werden, sind sie relativ XHR selbst bietet eine sehr praktische API zum Betrieb von Headern.

Aus Sicherheitsgründen können einige Header-Felder nur über den User Agent festgelegt werden Implementierung, kann nicht programmgesteuert festgelegt werden: Anforderungsheader-verbotenes Feld und Antwortheader-verbotenes Feld.

Wenn ein unzulässiger HTTP-Header-Attributname verwendet oder ein nicht beschreibbares Attribut geschrieben wird, Header Methoden lösen normalerweise TypeError-Ausnahmen aus:

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

Die beste Vorgehensweise besteht darin, vor der Verwendung zu überprüfen, ob der Inhaltstyp korrekt ist, wie zum Beispiel:

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

Da Header in der Anfrage verwendet werden können Anfrage senden oder als Antwort Das Headers-Objekt wird in der Anfrage empfangen und gibt an, welche Parameter beschreibbar sind. Es verfügt über ein spezielles Schutzattribut. Diese Eigenschaft ist nicht im Web verfügbar, sie beeinflusst jedoch, welche Inhalte vorhanden sein können Das Header-Objekt wurde geändert.

Mögliche Werte sind wie folgt:

keine: Standard

r

equest：从 request 中获得的 
headers（Request.headers）只读
request-no-cors：从不同域（Request.mode no-cors）的 
request 中获得的 headers 只读
response：从 response 中获得的 
headers（Response.headers）只读
immutable：在 ServiceWorkers 中最常用的，所有的 headers 
都只读

Anfrage

Anfrage Die Schnittstelle definiert das Anforderungsformat zum Anfordern von Ressourcen über HTTP. Eine einfache Anforderung ist wie folgt aufgebaut:

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

Wie fetch() akzeptiert Request einen zweiten optionalen Parameter, einen Init, der verschiedene Konfigurationen steuern kann Objekt:

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

Das Modusattribut wird verwendet, um zu bestimmen, ob domänenübergreifende Anfragen zulässig sind und welche Antwortattribute lesbar sind. Modus Optionale Attributwerte:

same-origin: Die Anfrage folgt der Same-origin-Richtlinie

no-cors: Standardwert, der Skripte von CDN, Bilder von anderen Domänen und andere domänenübergreifende Ressourcen zulässt (Voraussetzung ist Methode kann nur HEAD, GET oder POST sein)

cors: domänenübergreifend ist zulässig, die Anfrage folgt dem CROS-Protokoll

Credentials-Aufzählungsattribut bestimmt, ob Cookies domänenübergreifend abgerufen werden können im Einklang mit XHR Das withCredentials-Flag ist dasselbe, hat aber nur drei Werte, nämlich omit (Standard), same-origin und include.

Antwort

Antwortinstanz ist, nachdem fentch() Versprechen verarbeitet Später zurückgegebene Instanzen davon können auch über JavaScript erstellt werden, sind aber nur innerhalb von ServiceWorkers wirklich nützlich. Bei Verwendung vonrespondWith() -Methode und stellt eine benutzerdefinierte Antwort zum Akzeptieren der Anfrage bereit:

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

Der Response()-Konstruktor akzeptiert zwei optionale Parameter – den Antwortdatenkörper und ein Initialize-Objekt (mit Die von Request() akzeptierten Init-Parameter sind ähnlich.)

Die häufigsten Antwortattribute sind:

Response.status — 整数(默认值为200) 
为response的状态码.
Response.statusText — 
字符串(默认值为OK),该值与HTTP状态码消息对应.
Response.ok — 如上所示, 
该属性是来检查response的状态是否在200-299(包括200,299)这个范围内.该属性返回一个Boolean值.
Response.headers — 响应头
Response.type — 响应类型，如：basic/ cors 
/error

Body

Sowohl Request als auch Response implementieren die Body-Schnittstelle. Während des Anfragevorgangs werden beide übertragen Körper, der eine Instanz eines der folgenden Typen sein kann:

ArrayBuffer
ArrayBufferView
Blob/file
URLSearchParams
FormData

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

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

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