Utiliser l'API Fetch JavaScript de manière asynchrone

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

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.

---

/**
 * 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()
    }
  }
}

Récupérer les données

---

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

---