Exemple d'utilisation de Fetch() en JavaScript (code)

Ce que cet article vous apporte concerne les exemples d'utilisation (code) de Fetch() en JavaScript. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

Fetch() fournit un moyen de demander des ressources de manière asynchrone sur le réseau et est utilisé pour accéder et exploiter des parties du pipeline HTTP, telles que les requêtes et les réponses.

Pièges courants du fetch :

• Lors de la réception d'un code d'état HTTP indiquant une erreur, la promesse renvoyée par fetch() ne sera pas marquée comme rejetée (même si le le code d'état est 404 ou 500). fetch() marquera l'état Promise comme résolu (mais solve renvoie une valeur mais la propriété OK est définie sur false). Une panne de réseau ou la demande bloquée sera marquée comme rejetée.

• fetch() n'envoie ni ne reçoit de cookies du serveur. L'envoi de cookies nécessite la définition de l'option fetch(url, {credentials: 'include'}).
  

Demande XHR brute

var xhr = new XMLHttpRequest();
xhr.open('GET', url);
xhr.responseType = 'json';

xhr.onload = function() {
  console.log(xhr.response);
};

xhr.onerror = function() {
  console.log("Oops, error");
};

xhr.send();

demande de récupération

fetch(url).then(function(response) {
  return response.json();
}).then(function(data) {
  console.log(data);
}).catch(function(e) {
  console.log("Oops, error");
});

Utilisez les fonctions fléchées : > Obtenez un fichier JSON et imprimez-le à la console. Spécifiez le chemin de la ressource, puis renvoyez un objet Response et utilisez la méthode json() pour obtenir le contenu JSON.

fetch(url).then(response => response.json())
  .then(data => console.log(data))
  .catch(e => console.log("Oops, error", e))

paramètre fetch

fetch() accepte un deuxième paramètre facultatif pour contrôler les paramètres d'initialisation de différentes configurations.

Demande contenant des identifiants

// Example POST method implementation:

postData('http://example.com/answer', {answer: 42})
  .then(data => console.log(data)) // JSON from `response.json()` call
  .catch(error => console.error(error))

function postData(url, data) {
  // Default options are marked with *
  return fetch(url, {
    body: JSON.stringify(data), // must match 'Content-Type' header
    cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
    credentials: 'same-origin', // include, same-origin, *omit
    headers: {
      'user-agent': 'Mozilla/4.0 MDN Example',
      'content-type': 'application/json'
    },
    method: 'POST', // *GET, POST, PUT, DELETE, etc.
    mode: 'cors', // no-cors, cors, *same-origin
    redirect: 'follow', // manual, *follow, error
    referrer: 'no-referrer', // *client, no-referrer
  })
  .then(response => response.json()) // parses response to JSON
}

Demande contenant des identifiants :

Si vous envoyez des identifiants à partir de la même source :

fetch('https://example.com', {
    //将credentials: 'include'添加到传递给fetch()方法的init对象
    credentials: 'include' 
})

Assurez-vous le navigateur n'inclut pas les informations d'identification dans la demande :

fetch('https://example.com', {
  credentials: 'same-origin'  
})

Télécharger les données JSON

fetch('https://example.com', {
  credentials: 'omit'  
})

Télécharger le fichier

var url = 'https://example.com/profile';
var data = {username: 'example'};

fetch(url, {
  method: 'POST', // or 'PUT'
  body: JSON.stringify(data), // data can be `string` or {object}!
  headers: new Headers({
    'Content-Type': 'application/json'
  })
}).then(res => res.json())
.catch(error => console.error('Error:', error))
.then(response => console.log('Success:', response));

Utilisez

,

et

<input type="file" />FormData()En-têtesfetch()

Utilisez le constructeur Headers pour créer un objet headers. L'objet headers est une paire de valeurs multi-clés :

Le contenu peut être obtenu :

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

Pour résumer, les principaux avantages de Fetch sont :

console.log(myHeaders.has("Content-Type")); // true
console.log(myHeaders.has("Set-Cookie")); // false

Syntaxe concise et plus sémantique

• Basée sur Implémentation standard de Promise, prenant en charge async/await

• L'isomorphisme est pratique, utilisez isomorphic-fetch

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!