Module 06 – fetch API
6.1. fetch API............................................................................................................. 1
6.1.1. Syntaxe........................................................................................................ 1
6.1.2. await fetch................................................................................................... 1
6.1.3. Données dans le body.................................................................................. 2
6.1.4. Méthode authentifiées.................................................................................. 2
6.1.5. [Link]..................................................................................................... 2
6.1. fetch API
fetch est utilisé pour échanger des données avec un serveur.
Cela permet donc de modifier une page web avec de nouvelles données sans
recharger la page ou encore d'envoyer des données au serveur avec JavaScript.
6.1.1. Syntaxe
syntaxe
fetch(url, {
method: 'GET', // GET, POST, PUT, DELETE, OPTIONS
headers: { 'Content-Type': 'application/json' },
body: [Link](obj)
});
6.1.2. await fetch
Consultez le projet démo [Link] (sur LÉA).
Voici un exemple d'échange réalisé avec fetch.
On utilise le mot clé async devant le nom de la fonction pour pouvoir utiliser le
mot clé await.
Le mot clé await permet d'attendre la réponse de la fonction asynchrone.
async function exemplefetch() {
const valeur = [Link]('qqc').unePropriete;
const url = `[Link]
const reponse = await fetch(url);
// si la réponse est ok ([Link]==200)
if ([Link]) {
// obtenir les données de la fonction asynchrone json()
const data = await [Link]();
// faire qqc avec data
} else {
alert('Une erreur s\'est produite');
}
}
[Link]('btn').addEventListener('click', exemplefetch);
420-4D6 Module 06 – fetch API Page 2 sur 2
6.1.3. Données dans le body
Certaines méthodes des APIs demandent à ce que le corps du message contient
des données. On spécifie alors le type de données JSON dans l'en-tête du
message (header content-type), et les données dans le corps du message (body).
const url = 'qqc'; const d01 = 'qqc'; const d02 = 'qqc';
const response = await fetch(url, {
headers: { 'Content-Type':'application/json' },
method: 'PUT', // peut être POST, PUT, DELETE, etc.
body: [Link]({
data01: d01,
data02: d02,
}),
});
6.1.4. Méthode authentifiées
Certaines méthodes des APIs demandent à ce que l'identité de l'appelant soit
spécifié. L'identité est transmise par le biais d'un bearer token dans l'en-tête
(header) de la requête.
const url = 'qqc'; const d01 = 'qqc'; const d02 = 'qqc';
const bearerToken = 'bearer QQC0X90X90X9ETC';
const response = await fetch(url, {
method: 'PUT', // peut être POST, PUT, DELETE, etc.
headers: {
authorization: bearerToken,
},
});
6.1.5. [Link]
Voici un exemple d'échange de données JSON réalisé avec fetch.
async function exemplefetch() {
const valeur = [Link]('qqc').unePropriete;
const url = `[Link]
fetch(url).then((reponse) => {
// si la réponse est ok ([Link]==200)
if ([Link]) {
// obtenir les données de la fonction asynchrone json()
[Link]().then((data) => {
// faire qqc avec data
[Link](data);
});
} else {
[Link]('Une erreur s\'est produite');
}
});
}
[Link]('btn').addEventListener('click', exemplefetch);
© glachance@[Link]