Utiliser fetch

fetch est une fonction, fournie par JavaScript qui permet d'interroger une URL distante (une API par exemple) pour récupérer un contenu, le plus souvent en JSON.

fetch retourne une Promise, appelée Response, qui elle-même retourne une Promise.

let url = 'https://api.example.com/users';

fetch(url) // j'interroge l'URL
    .then(response => response.json()) // fetch me renvoie une Promise, j'utilise .json() pour faire l'équivalent d'un JSON.parse()
    .then(data => console.log(data)) // response.json() => son resolve m'envoie les données
    .catch(err => console.error(err)); // response.json() => son reject m'envoie une erreur

Par défaut fetch utilise la méthode HTTP GET pour communiquer avec l'URL distante, mais elle peut également utiliser POST.

Soit pour envoyer directement les données :

let url = 'https://api.example.com/register';
let userData = {
    username: 'Marianne',
    password: 'superSecure'
};

// si j'envoie directement les données je les transforme en JSON et je les envoie dans le corps de la requête

fetch(url, {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json'
    },
    body: JSON.stringify(userData)
})
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(err => console.error(err));

Soit pour envoyer l'équivalent d'un formulaire :

let url = 'https://api.example.com/register';

// si j'envoie un formulaire je le construis avec FormData

let formData = new FormData();
formData.append('username', "Votre surnom");
formData.append('firstName', "Votre prénom");
formData.append('lastName', "Votre nom");
formData.append('email', "Votre email 3WA");

let body = {
    method: 'POST',
    body: formData
};

15 January 2026