Dans une application SPA créée par exemple en vuejs, le principe de fonctionnement basique consiste à demander des données à une ou plusieurs API afin de modifier l'affichage de la fenêtre de navigation.
L'envoi de requêtes à une API se fait de façon asynchrone, de façon à ce que l'application ne soit pas bloquée le temps que la requête soit traitée et que la réponse arrive. Pour envoyer la requête, il y a 2 solutions très utilisées :
Les deux solutions proposent des fonctions pour faire des requêtes http asynchrones. Il est donc possible d'interroger une API REST pour obtenir des données.
Elles ont chacune leur avantages/inconvénients, mais si l'on privilégie la portabilité et la simplicité d'utilisation, Axios a un léger avantage. En revanche, Axios est à l'origine un module node, donc du code JS. Utiliser Axios implique d'intégrer son code l'application front-end. Quand celle-ci est envoyée au navigateur, elle sera donc plus volumineuse que la même application faite avec fetch, dont les fonctions sont déjà intégrées dans les navigateurs modernes (mais pas les anciens !)
Pour utiliser axios dans une application JS, il suffit d'installer le paquet axios :
npm install axios
Ensuite, dans les fichiers JS où l'on a besoin d'axios, il faut importer un objet qui permet d'accéder à toutes les fonctionnalités d'axios :
import axios from 'axios'
Enfin, on utilise les méthodes de cet objet pour faire des requêtes asynchrones. Les méthodes principales sont celles qui permettent de faire des requêtes http et elles sont toutes basées sur le principe des promesses afin de gérer le fait que le résultat de la requête n'arrive pas forcément immédiatement. Il faut donc attendre ce résultat pour ensuite faire quelque chose avec.
Pour gérer cette attente, il y a deux solutions syntaxiques : "à l'ancienne" avec les fonctions then(), catch() et des callbacks, ou bien "moderne", avec try/catch. De nombreux exemples sur le net utilisent la syntaxe à l'ancienne. Même si cette syntaxe devient rapidement illisible en cas d'enchaînements de traitements, il est important de la connaître, ne serait-ce que pour la transformer en try/catch.
// requete GET : 1 param. = URL demandée
axios.get("<https://monsite.org/products/get/12345>")
.then(res => { // faire qqchose avec res.data })
.catch(err => { // faire qqchose avec err, par exemple afficher err.message })
// requete POST : 2 param. obligatoires = URL demandée + données à envoyer, 3ème param = options de config. de la requête
axios.post("<https://monsite.org/products/create>", { name: "enclume", price: 1000}, {headers: 'MY-HEADER'})
.then(res => { // faire qqchose avec res.data })
.catch(err => { // faire qqchose avec err, par exemple afficher err.message })
// requête DELETE : 2 param : URL + options de config.
axios.delete("<https://monsite.org/products/remove>", { data: { name: "enclume"} }) // data = objet intégré dans le corps de la requête
.then(res => { // faire qqchose avec res.data })
.catch(err => { // faire qqchose avec err, par exemple afficher err.message })
let answer = null
try {
answer = await axios.get("<https://monsite.org/products/get/12345>")
// faire qqchose avec answer.data qui contient les données de réponse
answer = await axios.post("<https://monsite.org/products/create>", { name: "enclume", price: 1000})
// faire qqchose avec answer.data qui contient les données de réponse
answer = axios.delete("<https://monsite.org/products/remove>", { data: { name: "enclume"} })
// faire qqchose avec answer.data qui contient les données de réponse
}
catch(err) {
// faire qqchose avec err, par exemple afficher err.message
...
}
ATTENTION ! Comme indiqué dans les commentaires, les fonctions axios ne renvoient pas directement ce qui est renvoyé par l'API. Elles renvoient un objet dont le champ data contient la réponse de l'API. Dans l'exemple ci-dessus, la réponse de l'API est donc accessible grâce à answer.data.