Formation Apprendre le JavaScript : Appel HTTP avec fetch()

La méthode fetch() permet de faire des appels HTTP afin de récupérer des ressources sur le réseau et utilise le système de promesse que l'on a vu précédemment.

Le premier paramètre sera souvent une chaîne de caractères indiquant l'URL de la ressource à aller récupérer et le second paramètre sera un objet d'options spécifiant les informations à envoyer avec la requête (méthode, en tête...)

fetch('https://jsonplaceholder.typicode.com/posts?_limit=10')
    .then(r => console.log('La réponse', r))

La promesse est résolue avec un objet Response qui contiendra des informations sur le retour fait par le serveur. Cet objet contiendra notamment une propriété ok qui sera vraie sur la status de la réponse est compris entre 200 et 299 (les redirects sont pris suivi lors de l'appel HTTP)
On aura aussi 2 méthodes intéréssantes :

• text() qui renverra le texte de la réponse
• json() qui parsera la réponse au format JSON.

fetch('https://jsonplaceholder.typicode.com/posts?_limit=10',{
    headers: {
        Accept: 'application/json'
    }
})
    .then(r => {
        if (r.ok) {
            return r.json()
        } else {
            throw new Error('Erreur serveur', {cause: r})
        }
    })
    .then(posts => {
        console.log('La liste des articles : ', posts)
    })
    .catch(e => {
        console.error('Une erreur est survenue', e)
    })

On peut aussi utiliser cette méthode pour envoyer des données à un serveur au format JSON.

fetch('https://jsonplaceholder.typicode.com/posts',{
    method: 'POST',
    headers: {
        Accept: 'application/json',
        'Content-Type': 'application/json',
    },
    body: JSON.stringify({title: 'Hello world'})
})