Recherche…
Syntaxe
- promise = aller chercher (URL) .then (fonction (réponse) {})
- promesse = aller chercher (URL, options)
- promesse = chercher (demande)
Paramètres
| Les options | Détails |
|---|---|
method | La méthode HTTP à utiliser pour la requête. ex: GET , POST , PUT , DELETE , HEAD . La valeur par défaut est GET . |
headers | Un objet Headers contenant des en-têtes HTTP supplémentaires à inclure dans la requête. |
body | La charge utile de la demande peut être une string ou un objet FormData . Par défaut à undefined |
cache | Le mode de mise en cache. default , reload , no-cache |
referrer | Le référent de la demande. |
mode | cors , no-cors , same-origin . Par défaut à no-cors . |
credentials | omit , same-origin , include . Par défaut, omit . |
redirect | follow , error , manual . Par défaut à follow . |
integrity | Métadonnées d'intégrité associées. Par défaut, chaîne vide. |
Remarques
Le standard Fetch définit les requêtes, les réponses et le processus qui les lie: la récupération.
Parmi les autres interfaces, la norme définit les objets de Request et de Response , conçus pour être utilisés pour toutes les opérations impliquant des requêtes réseau.
Une application utile de ces interfaces est GlobalFetch , qui peut être utilisée pour charger des ressources distantes.
Pour les navigateurs qui ne prennent pas encore en charge le standard Fetch, GitHub dispose d'un polyfill disponible. En outre, il existe également une implémentation Node.js utile pour la cohérence serveur / client.
En l'absence de promesses annulables, vous ne pouvez pas abandonner la requête d'extraction ( numéro github ). Mais il y a une proposition du T39 à l'étape 1 pour les promesses annulables.
GlobalFetch
L'interface GlobalFetch expose la fonction de fetch , qui peut être utilisée pour demander des ressources.
fetch('/path/to/resource.json')
.then(response => {
if (!response.ok()) {
throw new Error("Request failed!");
}
return response.json();
})
.then(json => {
console.log(json);
});
La valeur résolue est un objet de réponse . Cet objet contient le corps de la réponse, ainsi que son statut et ses en-têtes.
Définir les en-têtes de demande
fetch('/example.json', {
headers: new Headers({
'Accept': 'text/plain',
'X-Your-Custom-Header': 'example value'
})
});
Données POST
Enregistrement de données de formulaire
fetch(`/example/submit`, {
method: 'POST',
body: new FormData(document.getElementById('example-form'))
});
Publication de données JSON
fetch(`/example/submit.json`, {
method: 'POST',
body: JSON.stringify({
email: document.getElementById('example-email').value,
comment: document.getElementById('example-comment').value
})
});
Envoyer des cookies
La fonction de récupération ne envoie pas de cookies par défaut. Il existe deux manières d’envoyer des cookies:
- N'envoyez des cookies que si l'URL a la même origine que le script appelant.
fetch('/login', {
credentials: 'same-origin'
})
- Toujours envoyer des cookies, même pour les appels d'origine croisée.
fetch('https://otherdomain.com/login', {
credentials: 'include'
})
Obtenir des données JSON
// get some data from stackoverflow
fetch("https://api.stackexchange.com/2.2/questions/featured?order=desc&sort=activity&site=stackoverflow")
.then(resp => resp.json())
.then(json => console.log(json))
.catch(err => console.log(err));
Utilisation de l'extraction pour afficher les questions de l'API de dépassement de capacité de la pile
const url =
'http://api.stackexchange.com/2.2/questions?site=stackoverflow&tagged=javascript';
const questionList = document.createElement('ul');
document.body.appendChild(questionList);
const responseData = fetch(url).then(response => response.json());
responseData.then(({items, has_more, quota_max, quota_remaining}) => {
for (const {title, score, owner, link, answer_count} of items) {
const listItem = document.createElement('li');
questionList.appendChild(listItem);
const a = document.createElement('a');
listItem.appendChild(a);
a.href = link;
a.textContent = `[${score}] ${title} (by ${owner.display_name || 'somebody'})`
}
});