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.
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'}).
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();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))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
}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'
})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)); <input type="file" />FormData()En-têtesfetch()
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")); // falseCe 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!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
