Les appels http GET POST en VueJs

Les appels HTTP (vers des WEBAPI) en VueJs peuvent être implémentés grâce au package NPM vue-resource.

Ce dernier vous permet de faire des appels http GET / POST et de facilement envoyer des données en JSon par exemple sans rafraîchir la page et sans bloquer la fenêtre en attendant le résultat qui arrivera de manière asynchrone.

Installation

L’installation de ce package est aussi simple que pour les autres : rendez-vous dans votre console POWERSHELL de Visual Studio Code et tapez l’instruction suivante :

npm install vue-resource

Editez ensuite votre fichier js principal (main.js) pour ajouter les quelques lignes suivantes correspondant à l’utilisation de vue-resource:

import Vue from 'vue'
import App from './App.vue'
import VueResource from 'vue-resource'

Vue.config.productionTip = false
Vue.use(VueResource);

new Vue({
  VueResource,
  render: h => h(App),
}).$mount('#app')

Utilisation de vue-resource

Pour utiliser vue-resource, il vous faut évidemment une API à appeler. Pour faire simple, on va créer une api de test en PHP que vous pourrez héberger chez un hébergeur PHP gratuit ou en local via MAMP qui est lui aussi gratuit.

Créer une petite Web API

Voici un exemple de code source d’API très basique juste pour tester les appels GET et POST:

1 fichier .php pour tester le GET: testget.php:

<?php
$jsonResponse["message"] = "Bonjour ".$_GET["prenom"];
http_response_code(200);
echo json_encode($jsonResponse);
?>

Et 1 fichier .php pour tester le POST: testpost.php:

<?php
$jsonResponse["message"] = "Bonjour ".$_POST["prenom"];
http_response_code(200);
echo json_encode($jsonResponse);
?>

Pour éviter d’avoir l’erreur suivante lors de l’appel php via vue-js: “Access to XMLHttpRequest at ‘xxx’ from origin ‘xxx’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.”, vous pouvez ajouter le fichier cors.php ci-dessous au même endroit que les autres fichiers et ajouter dans vos autres fichiers ceci:

require "cors.php";

Voici le fichier “cors.php” en question:

<?php
// Allow from any origin
if (isset($_SERVER['HTTP_ORIGIN'])) {
    // Decide if the origin in $_SERVER['HTTP_ORIGIN'] is one
    // you want to allow, and if so:
    header("Access-Control-Allow-Origin: {$_SERVER['HTTP_ORIGIN']}");
    header('Access-Control-Allow-Credentials: true');
    header('Access-Control-Max-Age: 86400');    // cache for 1 day
}

// Access-Control headers are received during OPTIONS requests
if ($_SERVER['REQUEST_METHOD'] == 'OPTIONS') {

    if (isset($_SERVER['HTTP_ACCESS_CONTROL_REQUEST_METHOD']))
        // may also be using PUT, PATCH, HEAD etc
        header("Access-Control-Allow-Methods: GET, POST, OPTIONS");         

    if (isset($_SERVER['HTTP_ACCESS_CONTROL_REQUEST_HEADERS']))
        header("Access-Control-Allow-Headers: {$_SERVER['HTTP_ACCESS_CONTROL_REQUEST_HEADERS']}");
}
?>

Appeler la WebAPI via vue-resource

Maintenant que nous avons une WebAPI à appeler, imaginons une textbox permettant d’encoder notre prénom et 2 boutons permettant d’appeler les 2 API : un bouton pour tester le GET et un autre pour tester le POST. Le résultat s’affichera en dessous de tout cela.

L’avantage est donc que les appels se font directement depuis le navigateur sans perdre l’affichage actuel (pas de rafraîchissement) et sans blocage de l’affichage (le résultat arrive de manière asynchrone).

Appel GET via vue-resource

Voici comment faire un appel GET:

this.$http.get('http://localhost:81/vuetestresource/public/testget.php', {params: {prenom: this.prenom}})

On utilise donc la variable $http définie par notre package vue-resource sur laquelle on peut appeler la méthode “get” en lui passant l’url ainsi que la liste des paramètres (ici prenom) via {params: {prenom: this.prenom}}.

Ensuite, on peut ajouter à cet appel le traitement de la réponse. En effet, on fait un appel et la réponse arrivera plus tard de manière asynchrone. Pour capturer cette réponse, on va ajouter directement à la suite de cette méthode une autre fonction :

.then(function (response) { code... });

Tout cela est à ajouter dans la partie SCRIPT de notre composant principal : App.vue:

export default {
  name: 'app',
  data() {
    return {
      prenom: '',
      httpResponse: ''
    }
  },
  methods: {
    onTestGet() {
      // Appel GET
      this.$http.get('http://localhost:81/vuetestresource/public/testget.php', {params: {prenom: this.prenom}}).then(function(response) {
        // Comme c'est du Json: on le traduit
        return response.json();
      }).then(function(json) {
        // On lit le contenu du Json
        this.httpResponse = json.message;
      });
    }
  }
}

Vous pouvez voir que j’ai également ajouté 2 “data” : prenom et httpResponse:

• prenom est la variable qu’on va lier à la textbox de notre interface html
• httpResponse est la variable qu’on va afficher dans notre interface html via {{ }}. La valeur de cette variable sera assignée dans notre méthode then(…) qui traite le résultat json de notre réponse (voir code ci-dessus).

Voilà, on a notre code VUE, reste à faire notre code HTML pour afficher les contrôles de saisie (textbox), de test (des boutons) et l’affichage du résultat (via {{ }}). Ce code va donc être écrit dans la partie TEMPLATE de notre fichier App.vue:

<template>
  <div id="app">
    Prénom: <input type="text" v-model="prenom"/><br>
    <input type="button" value="Test GET" @click="onTestGet()"/><br>
    <input type="button" value="Test POST" @click="onTestPost()"/><br>
    {{ httpResponse }}
  </div>
</template>

Appel POST via vue-resource

Pour faire un appel POST, c’est la même technique. Côté interface HTML on a déjà tout et comme vous pouvez le voir ci-dessus, le click sur le bouton “Test POST” va appeler une méthode “onTestPost()” qu’on va donc coder.

Pour appeler une API en mode POST, il faut créer une liste des données à poster via un objet FormData comme ceci:

var formData = new FormData();
formData.append("prenom", this.prenom);

Ensuite il suffit de faire l’appel POST comme le GET en lui passant ces données à poster comme ci-dessous:

// Appel GET
this.$http.post('http://localhost:81/vuetestresource/public/testpost.php', formData)

Comme pour le GET, on fait l’appel et la réponse arrive plus tard dans la fonction déclarée en paramètre de la méthode then(xxx) puis on transforme le résultat de la réponse JSon.

On obtient donc le code complet suivant dans la partie “methods” de notre composant Vue:

methods: {
    onTestGet() {
      ...
    },
    onTestPost() {
      // Données à poster
      var formData = new FormData();
      formData.append("prenom", this.prenom);

      // Appel POST
      this.$http.post('http://localhost:81/vuetestresource/public/testpost.php', formData).then(function(response) {
        // Comme c'est du Json: on le traduit
        return response.json();
      }).then(function(json) {
        // On lit le contenu du Json
        this.httpResponse = json.message;
      });
    }
  }

Conclusion

Comme vous avez pu le constater, Vue reste simple d’utilisation. Il suffit de modifier le composant principal. Quand on veut installer un nouveau package, il suffit d’appeler la commande npm install et ensuite d’ajouter ce composant dans les import, dans le Vue.use et dans la déclaration de l’objet Vue. Ensuite, il ne reste plus qu’à l’utiliser.

Dans le cas du get et du post, les méthodes s’ajoutent à la suite l’une de l’autre via

this.$http.get / .post (url, params)
   .then(function(response) { ... })
   .then(function(json) { ... });

Voilà, rien de bien compliqué encore une fois. J’espère que cet article vous aura plu. Si c’est le cas n’hésitez pas à commenter et à vous inscrire à ce blog pour ne rien manquer. Je vous dis à très bientôt sur developpement-web-facile.com pour de nouveaux tutoriaux simples et concrets qui vous permettront de progresser facilement dans le développement web.