fetch()
vous permet d'effectuer des requêtes réseau semblables à XMLHttpRequest (XHR). La principale différence est que l'API Fetch utilise des promesses, qui disposent d'une API plus simple pour vous aider à éviter les rappels complexes dans l'API XMLHttpRequest.
Si vous n'avez jamais utilisé les promesses auparavant, consultez Présentation des promesses JavaScript.
Demande de récupération de base
Voici un exemple d'implémentation avec XMLHttpRequest
, puis fetch
. Nous voulons demander une URL, obtenir une réponse et l'analyser au format JSON.
XMLHttpRequest
Un XMLHttpRequest
a besoin de deux écouteurs pour gérer les cas de réussite et d'erreur, et d'un appel à open()
et send()
.
Exemple tiré de la documentation MDN
function reqListener() {
var data = JSON.parse(this.responseText);
console.log(data);
}
function reqError(err) {
console.log('Fetch Error :-S', err);
}
var oReq = new XMLHttpRequest();
oReq.onload = reqListener;
oReq.onerror = reqError;
oReq.open('get', './api/some.json', true);
oReq.send();
Méthode fetch
Notre requête de récupération se présente comme suit:
fetch('./api/some.json')
.then(
function(response) {
if (response.status !== 200) {
console.log('Looks like there was a problem. Status Code: ' +
response.status);
return;
}
// Examine the text in the response
response.json().then(function(data) {
console.log(data);
});
}
)
.catch(function(err) {
console.log('Fetch Error :-S', err);
});
La requête fetch()
n'a besoin que d'un seul appel pour effectuer le même travail que dans l'exemple XHR. Pour traiter la réponse, nous vérifions d'abord que l'état de la réponse est 200, puis nous analysons la réponse au format JSON. La réponse à une requête fetch()
est un objet Stream, ce qui signifie qu'après avoir appelé la méthode json()
, une promesse est renvoyée.
Le flux se déroule de manière asynchrone.
Métadonnées de réponse
L'exemple précédent montrait l'état de l'objet Response et comment analyser la réponse au format JSON. Voici comment gérer les autres métadonnées auxquelles vous pourriez vouloir accéder, telles que les en-têtes:
fetch('users.json').then(function(response) {
console.log(response.headers.get('Content-Type'));
console.log(response.headers.get('Date'));
console.log(response.status);
console.log(response.statusText);
console.log(response.type);
console.log(response.url);
});
Types de réponses
Lorsque nous effectuons une requête de récupération, la réponse reçoit le response.type
"basic
", "cors
" ou "opaque
". Ces types
indiquent l'origine de la ressource, et vous pouvez les utiliser pour déterminer comment traiter l'objet de réponse.
Lorsque le navigateur demande une ressource ayant la même origine, la réponse possède un type basic
avec des restrictions sur ce que vous pouvez afficher à partir de la réponse.
Si une requête est effectuée pour une ressource sur une autre origine et que cette origine renvoie des en-têtes COR, le type est cors
. Les réponses cors
sont semblables aux réponses basic
, mais elles limitent les en-têtes que vous pouvez afficher à Cache-Control
, Content-Language
, Content-Type
, Expires
, Last-Modified
et Pragma
.
Les réponses opaque
proviennent d'une origine différente qui ne renvoie pas d'en-têtes CORS. Avec une réponse opaque, nous ne pouvons pas lire les données renvoyées ni afficher l'état de la requête, ce qui signifie que vous ne pouvez pas vérifier si la requête a abouti.
Vous pouvez définir un mode pour une requête d'exploration afin que seuls certains types de requêtes soient résolus. Les modes que vous pouvez définir sont les suivants:
same-origin
ne réussit que pour les requêtes concernant des éléments de la même origine et rejette toutes les autres requêtes.cors
autorise les requêtes pour des éléments de même origine et d'autres origines qui renvoient les en-têtes COR appropriés.cors-with-forced-preflight
effectue une vérification préliminaire avant d'envoyer une requête.no-cors
est destiné à envoyer des requêtes à d'autres origines qui n'ont pas d'en-têtes CORS et qui génèrent une réponseopaque
. Toutefois, comme indiqué , cela n'est pas possible pour le moment dans le champ d'application global de la fenêtre.
Pour définir le mode, ajoutez un objet d'options en tant que deuxième paramètre de la requête fetch
, puis définissez le mode dans cet objet:
fetch('http://some-site.com/cors-enabled/some.json', {mode: 'cors'})
.then(function(response) {
return response.text();
})
.then(function(text) {
console.log('Request successful', text);
})
.catch(function(error) {
log('Request failed', error)
});
Enchaînement de promesses
L'une des grandes caractéristiques des promesses est la possibilité de les enchaîner. Pour fetch()
, cela vous permet de partager la logique entre les requêtes de récupération.
Si vous travaillez avec une API JSON, vous devez vérifier l'état et analyser le JSON pour chaque réponse. Vous pouvez simplifier votre code en définissant l'état et l'analyse JSON dans des fonctions distinctes qui renvoient des promesses, et utiliser la requête de récupération pour ne gérer que les données finales et le cas d'erreur.
function status(response) {
if (response.status >= 200 && response.status < 300) {
return Promise.resolve(response)
} else {
return Promise.reject(new Error(response.statusText))
}
}
function json(response) {
return response.json()
}
fetch('users.json')
.then(status)
.then(json)
.then(function(data) {
console.log('Request succeeded with JSON response', data);
}).catch(function(error) {
console.log('Request failed', error);
});
Cet exemple définit une fonction status
qui vérifie response.status
et renvoie une promesse résolue en tant que Promise.resolve()
ou une promesse refusée en tant que Promise.reject()
.
Il s'agit de la première méthode appelée dans la chaîne fetch()
.
Si la promesse est résolue, le script appelle ensuite la méthode json()
, qui renvoie une deuxième promesse de l'appel response.json()
et crée un objet contenant le JSON analysé. Si l'analyse échoue, la promesse est refusée et l'instruction catch s'exécute.
Cette structure vous permet de partager la logique entre toutes vos requêtes de récupération, ce qui facilite la gestion, la lecture et le test du code.
Demande POST
Parfois, une application Web doit appeler une API avec une méthode POST et inclure certains paramètres dans le corps de la requête. Pour ce faire, définissez les paramètres method
et body
dans les options fetch()
:
fetch(url, {
method: 'post',
headers: {
"Content-type": "application/x-www-form-urlencoded; charset=UTF-8"
},
body: 'foo=bar&lorem=ipsum'
})
.then(json)
.then(function (data) {
console.log('Request succeeded with JSON response', data);
})
.catch(function (error) {
console.log('Request failed', error);
});
Envoyer des identifiants avec une requête de récupération
Pour effectuer une requête de récupération avec des identifiants tels que des cookies, définissez la valeur credentials
de la requête sur "include"
:
fetch(url, {
credentials: 'include'
})