Utiliser l'API Fetch JavaScript de manière asynchrone

Publié le 25/10/2020 • Mis à jour le 25/10/2020


English language detected! 🇬🇧

  We noticed that your browser is using English. Do you want to read this post in this language?

Read the english version 🇬🇧 Close

Dans ce bout de code nous allons voir comment utiliser l'API Fetch JavaScript de manière asynchrone. Ouvrez votre console JavaScript et cliquez sur le bouton "Récupérer les données". Comme vous pouvez le voir, le message à la fin de la fonction snippet118() est affiché avant que le JSON ait été reçu. Pour plus de clarté, j'ai fait une sous-fonction fetchAsynch() qui est déclarée en tant qu'async et qui est responsable de retourner la promesse associée à l'appel de fetch.


Démo HTML du snippet

/**
 * J'utilise un module JavaScript afin d'isoler chaque snippet dans un fichier.
 * C'est en fait un mixin Vue.js. Utilisez le code appelé par la fonction mounted()
 * ou snippetXX().
 */
export default {
  data: {
    apiEndpoint: '/stats'
  },
  methods: {
    snippet118 () {
      console.log('snippet118() call.')
      this.fetchAsynch().then(json => {
        console.log('Received JSON!!')
        console.log(json)
      }).catch(error => {
        console.log('An error occured sorry: ' + error)
      })
      console.log('snippet118() end.')
    },
    async fetchAsynch () {
      const response = await fetch(this.apiEndpoint)
      if (!response.ok) {
        const message = `Error : ${response.status}`
        throw new Error(message)
      }

      return await response.json()
    }
  }
}

 Plus sur Stackoverflow   Lire la doc  Plus sur le web  Snippet aléatoire