Utiliser l'API Fetch JavaScript de manière asynchrone
Publié le 25/10/2020 • Actualisé 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()
}
}
}
Plus sur Stackoverflow Lire la doc Plus sur le web Snippet aléatoire
A vous de jouer !
Ces articles vous ont été utiles ? Vous pouvez m'aider à votre tour de plusieurs manières : (cliquez sur le lien "reply" dans à droite pour me contacter )
- Me remonter des erreurs ou typos.
- Me remonter des choses qui pourraient être améliorées.
- Aimez et repostez !
- Suivez moi sur Bluesky 🦋
- Inscrivez-vous au flux RSS.
- Cliquez sur les boutons Plus sur Stackoverflow pour me faire gagner des badges "annonceur" 🏅.
Merci et à très bientôt sur Strangebuzz ! 😉
