XML Http Demander la dernière technologie alternative - Récupérer

Dans les applications Web, JavaScript utilise XMLHttpRequest (XHR) pour effectuer des requêtes asynchrones, qui est une technologie qui améliore efficacement la communication des pages. Lorsque nous parlons de technologie Ajax, nous entendons généralement Ajax basé sur XMLHttpRequest. Bien que Ajax est utile, mais ce n'est pas la meilleure API. Elle n'est pas conçue pour adhérer au principe de séparation des tâches, mélangeant les entrées, les sorties et l'état suivi avec les événements dans un seul objet. De plus, les modèles basés sur les événements sont désormais JavaScript est en contradiction avec ses modèles de programmation asynchrone populaires basés sur Promise et générateur. Cet article présentera la dernière technologie alternative à XMLHttpRequest—— Fetch API, qui est une norme officielle du W3C.

Compatibilité

Avant de présenter, jetons un coup d'œil à la prise en charge actuelle des navigateurs grand public pour l'API Fetch :

Support de récupération Il est toujours présent les premiers stades, dans Firefox 39 et supérieur, et Chrome 42 Tous les éléments ci-dessus sont pris en charge.

Si vous souhaitez l'utiliser maintenant, vous pouvez également utiliser Fetch Polyfil pour soutenir ceux qui ne prennent pas encore en charge Fetch navigateur.

Avant d'utiliser Fetch, vous pouvez également effectuer des tests fonctionnels dessus :

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

Exemple de récupération simple

Dans l'API Fetch, la fonction la plus couramment utilisée est la fonction fetch(). Il reçoit un paramètre URL et renvoie un promettez de gérer la réponse. réponse est un objet 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() accepte un deuxième paramètre facultatif, un objet init qui peut contrôler différentes configurations. Si vous soumettez un Requête POST, le code est le suivant :

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

S'il y a une panne de réseau, la promesse fetch() sera rejetée, avec un Objet TypeError. Pour déterminer avec précision si fetch() réussit, vous devez inclure la situation résolue par la promesse, puis déterminer Response.ok à ce moment-là est vrai.

Fetch implémente quatre interfaces : GlobalFetch, Headers, Request et Réponse. GloabaFetch ne contient qu'une seule méthode de récupération pour obtenir des ressources réseau, et les trois autres correspondent directement aux concepts HTTP correspondants. De plus, dans En requête/réponse, Body est également confus.

En-têtes

L'interface des en-têtes permet de définir HTTP En-têtes de requête (Request.headers) et en-têtes de réponse (Response.headers). Un objet Headers est une simple paire de valeurs multi-noms :

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

Vous pouvez également transmettre un tableau multidimensionnel ou un littéral d'objet :

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

De plus, l'interface Headers fournit des API de définition, de suppression et autres. Utilisé pour récupérer son contenu :

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

Bien que certaines opérations ne soient utilisées qu'au sein des ServiceWorkers, elles sont relativement XHR lui-même fournit une API très pratique pour exploiter les en-têtes.

Pour des raisons de sécurité, certains champs d'en-tête ne peuvent être définis que via l'agent utilisateur Implémentation, ne peut pas être définie par programme : champ interdit d'en-tête de demande et champ interdit d'en-tête de réponse.

Si un nom d'attribut d'en-tête HTTP illégal est utilisé ou si un attribut non inscriptible est écrit, les en-têtes Les méthodes génèrent généralement des exceptions TypeError :

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

La meilleure pratique consiste à vérifier si le type de contenu est correct avant de l'utiliser, par exemple :

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

Puisque les en-têtes peuvent être utilisés dans le demande demande Envoyer ou en réponse Reçu dans la requête et précisant quels paramètres sont accessibles en écriture, l'objet Headers possède un attribut de garde spécial. Cette propriété n'est pas exposée au Web, mais elle affecte le contenu qui peut être L'objet en-têtes est modifié.

Les valeurs possibles sont les suivantes :

aucun : Par défaut

r

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

Demande

Demande L'interface définit le format de requête pour demander des ressources via HTTP. Une requête simple est construite comme suit :

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

Identique à fetch(), Request accepte un deuxième paramètre facultatif, un init qui peut contrôler différentes configurations. Objet :

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

L'attribut mode est utilisé pour déterminer si les requêtes inter-domaines sont autorisées et quels attributs de réponse sont lisibles. mode Valeurs d'attribut facultatives :

same-origin : la requête suit la politique de même origine

no-cors : valeur par défaut, autorisant les scripts du CDN, les images d'autres domaines et d'autres ressources inter-domaines (La condition préalable est la méthode ne peut être que HEAD, GET ou POST)

cors : le cross-domain est autorisé, la requête suit le protocole CROS

l'attribut d'énumération des informations d'identification détermine si les cookies peuvent être obtenus à travers les domaines, ce qui est conforme à XHR L'indicateur withCredentials est le même, mais n'a que trois valeurs, à savoir omettre (par défaut), même origine et inclure.

Réponse

L'instance de réponse est après que fentch() gère les promesses Les instances renvoyées ultérieurement peuvent également être créées via JavaScript, mais ne sont vraiment utiles qu'au sein de ServiceWorkers. Lors de l'utilisation deresponsWith() et fournit une réponse personnalisée pour accepter la requête :

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

Le constructeur Response() accepte deux paramètres facultatifs : le corps des données de réponse et un objet Initialize (avec Les paramètres d'initialisation acceptés par Request() sont similaires.)

Les attributs de réponse les plus courants sont :

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 et Response implémentent l'interface Body. Pendant le processus de demande, les deux porteront Corps, qui peut être une instance de l'un des types suivants :

ArrayBuffer
ArrayBufferView
Blob/file
URLSearchParams
FormData

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

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

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