Skip to content

12. Projeto [vuejs-10]: plugin [dao], pedidos HTTP assíncronos

A estrutura de diretórios do projeto [vuejs-10] é a seguinte:

Image

O projeto [vuejs-10] demonstra um componente a efetuar uma solicitação HTTP a um servidor remoto. A arquitetura utilizada é a seguinte:

Image

Um componente [Vue.js] utiliza a camada [dao] para comunicar com o servidor de cálculo de impostos.

12.1. Instalação de dependências

A aplicação [vuejs-10] utiliza a biblioteca [axios] para efetuar pedidos assíncronos ao servidor de cálculo de impostos. Precisamos de instalar esta dependência:

Image

  • em [4-5], a linha adicionada ao ficheiro [package.json] após a instalação da biblioteca [axios] [1-3];

12.2. A classe [Dao]

A classe [Dao] é a que foi desenvolvida na secção [A Classe Dao]. Incluímo-la aqui para referência:


'use strict';
 
// imports
import qs from 'qs'
 
// dao] class
class Dao {
 
  // manufacturer
  constructor(axios) {
    this.axios = axios;
    // session cookie
    this.sessionCookieName = "PHPSESSID";
    this.sessionCookie = '';
  }

  // init session
  async  initSession() {
    // query options HHTP [get /main.php?action=init-session&type=json]
    const options = {
      method: "GET",
      // URL parameters
      params: {
        action: 'init-session',
        type: 'json'
      }
    };
    // execute query HTTP
    return await this.getRemoteData(options);
  }
 
  async  authentifierUtilisateur(user, password) {
    // query options HHTP [post /main.php?action=authenticate-user]
    const options = {
      method: "POST",
      headers: {
        'Content-type': 'application/x-www-form-urlencoded',
      },
      // body of POST
      data: qs.stringify({
        user: user,
        password: password
      }),
      // URL parameters
      params: {
        action: 'authentifier-utilisateur'
      }
    };
    // execute query HTTP
    return await this.getRemoteData(options);
  }
 
  async getAdminData() {
    // query options HHTP [get /main.php?action=get-admindata]
    const options = {
      method: "GET",
      // URL parameters
      params: {
        action: 'get-admindata'
      }
    };
    // execute query HTTP
    const data = await this.getRemoteData(options);
    // result
    return data;
  }
 
  async  getRemoteData(options) {
    // for the session cookie
    if (!options.headers) {
      options.headers = {};
    }
    options.headers.Cookie = this.sessionCookie;
    // execute query HTTP
    let response;
    try {
      // asynchronous request
      response = await this.axios.request('main.php', options);
    } catch (error) {
      // the [error] parameter is an exception instance - it can take various forms
      if (error.response) {
        // the server response is in [error.response]
        response = error.response;
      } else {
        // error restart
        throw error;
      }
    }
    // response is the entire HTTP response from the server (HTTP headers + response itself)
    // retrieve the session cookie if it exists
    const setCookie = response.headers['set-cookie'];
    if (setCookie) {
      // setCookie is an array
      // look for the session cookie in this table
      let trouvé = false;
      let i = 0;
      while (!trouvé && i < setCookie.length) {
        // look for the session cookie
        const results = RegExp('^(' + this.sessionCookieName + '.+?);').exec(setCookie[i]);
        if (results) {
          // the session cookie is stored
          // eslint-disable-next-line require-atomic-updates
          this.sessionCookie = results[1];
          // we found
          trouvé = true;
        } else {
          // next item
          i++;
        }
      }
    }
    // the server response is in [response.data]
    return response.data;
  }
}
 
// class export
export default Dao;

O projeto [vuejs-10] utiliza apenas o método assíncrono [initSession] nas linhas 18–30. Note-se que a classe [Dao] é instanciada com um parâmetro [axios] na linha 10, que é inicializado pelo código de chamada. Neste caso, o código de chamada é o script [./main.js].

12.3. O plugin [pluginDao]

O plugin [pluginDao] é o seguinte:


export default {
  install(Vue, dao) {
    // ajoute une propriété [$dao] à la classe Vue
    Object.defineProperty(Vue.prototype, '$dao', {
      // lorsque Vue.$dao est référencé, on rend le 2ième paramètre [dao]
      get: () => dao,
    })
  }
}

Se recordarmos a explicação dada para o plugin [event-bus], vemos que o plugin [pluginDao] cria uma nova propriedade chamada [$dao] na classe/função [Vue]. Esta propriedade terá (como iremos mostrar) como valor o objeto exportado pelo script [./Dao], ou seja, a classe [Dao] anterior.

12.4. O script principal [main.js]

O código do script principal [main.js] é o seguinte:


// imports
import Vue from 'vue'
import App from './App.vue'
import axios from 'axios';
 
// plugins
import BootstrapVue from 'bootstrap-vue'
Vue.use(BootstrapVue);
 
// bootstrap
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
 
// couche [dao]
import Dao from './Dao';
// configuration axios
axios.defaults.timeout = 2000;
axios.defaults.baseURL = 'http://localhost/php7/scripts-web/impots/version-14';
axios.defaults.withCredentials = true;
// instanciation couche [dao]
const dao = new Dao(axios);
 
// plugin [dao]
import pluginDao from './plugins/dao'
Vue.use(pluginDao, dao)
 
// configuration
Vue.config.productionTip = false
 
// instanciation projet [App]
new Vue({
  render: h => h(App),
}).$mount('#app')

O script [main.js]:

  • instancia a camada [dao] nas linhas 14–21;
  • inclui o plugin [pluginDao] nas linhas 24–25;
  • linha 15: a classe [Dao] é importada;
  • linhas 17–18: o objeto [axios], que lida com pedidos HTTP, é configurado. Este objeto é importado na linha 4;
    • linha 17: define um [timeout] de 2 segundos;
    • linha 18: a URL do servidor de cálculo de impostos;
    • linha 19: para ativar a troca de cookies com o servidor;
  • linhas 24-25: utilização do plugin [pluginDao]
    • linha 24: importação do plugin;
    • linha 25: integração do plugin. Podemos ver que o segundo parâmetro do método [Vue.use] é a referência à camada [dao] definida na linha 21. É por isso que a propriedade [Vue.$dao] se referirá à camada [dao] em todas as instâncias da classe/função [Vue], ou seja, em todos os componentes [Vue.js];

12.5. A vista principal [App.vue]

O código para a vista principal [App] é o seguinte:


<template>
  <div class="container">
    <b-card>
      <!-- message -->
      <b-alert show variant="success" align="center">
        <h4>[vuejs-10] : plugin [dao], requêtes HTTP asynchrones</h4>
      </b-alert>
      <!-- composant faisant une requête asynchrone au serveur de calcul d'impôt-->
      <Component1 @error="doSomethingWithError" @endWaiting="endWaiting" @beginWaiting="beginWaiting" />
      <!-- affichage d'une éventuelle erreur -->
      <b-alert show
               variant="danger"
               v-if="showError">Evénement [error] intercepté par [App]. Valeur reçue = {{error}}</b-alert>
      <!-- message d'attente avec un spinner -->
      <b-alert show v-if="showWaiting" variant="light">
        <strong>Requête au serveur de calcul d'impôt en cours...</strong>
        <b-spinner variant="primary" label="Spinning"></b-spinner>
      </b-alert>
    </b-card>
  </div>
</template>
 
<script>
  import Component1 from "./components/Component1";
  export default {
    name: "app",
    // état du composant
    data() {
      return {
        // contrôle le spinner d'attente
        showWaiting: false,
        // contrôle l'affichage de l'erreur
        showError: false,
        // l'erreur interceptée
        error: {}
      };
    },
    // composants utilisés
    components: {
      Component1
    },
    // méthodes de gestion des évts
    methods: {
      // début attente
      beginWaiting() {
        // on affiche l'attente
        this.showWaiting = true;
        // on cache le msg d'erreur
        this.showError = false;
      },
      // fin attente
      endWaiting() {
        // on cache l'attente
        this.showWaiting = false;
      },
      // gestion d'erreur
      doSomethingWithError(error) {
        // on note qu'il y a eu erreur
        this.error = error;
        // on affiche le msg d'erreur
        this.showError = true;
      }
    }
  };
</script>

Comentários

  • linha 9: [Component1] é o componente que efetua a solicitação HTTP assíncrona. Pode emitir três eventos:
    • [beginWaiting]: a solicitação está prestes a ser feita. Deve ser exibida uma mensagem de espera ao utilizador;
    • [endWaiting]: a solicitação está concluída. A espera deve ser interrompida;
    • [error]: a solicitação falhou. Deve ser exibida uma mensagem de erro;
  • linhas 10–13: o alerta que exibe qualquer mensagem de erro. É controlado pelo booleano [showError] na linha 33. Exibe o erro na linha 35;
  • linhas 14–18: o alerta que exibe a mensagem de espera com um indicador giratório. É controlado pela variável booleana [showWaiting] na linha 47;
  • linhas 45–50: [beginWaiting] é o método executado ao receber o evento [beginWaiting]. Exibe a mensagem de espera (linha 47) e oculta a mensagem de erro (linha 49) caso esta ainda esteja visível de uma operação anterior;
  • linhas 52–55: [endWaiting] é o método executado ao receber o evento [endWaiting]. Oculta a mensagem de espera (linha 54);
  • linhas 57–62: [doSomethingWithError] é o método executado ao receber o evento [error]. Regista o erro recebido (linha 59) e exibe a mensagem de erro (linha 61);

12.6. O componente [Component1]

O código para o componente [Component1] é o seguinte:


<template>
  <b-row>
    <b-col>
      <b-alert show
               variant="warning"
               v-if="showMsg">Valeur reçue du serveur = {{data}}</b-alert>
    </b-col>
  </b-row>
</template>
 
<script>
  export default {
    name: "component1",
    // component status
    data() {
      return {
        showMsg: false
      };
    },
    // event management methods
    methods: {
      // processing data received from the server
      doSomethingWithData(data) {
        // record the data received
        this.data = data;
        // we display it
        this.showMsg = true;
      }
    },
    // the component has just been created
    created() {
      // initialize the session with the server - asynchronous request
      // we use the promise rendered by the [dao] layer methods
      // we signal the start of the operation
      this.$emit("beginWaiting");
      // asynchronous operation is launched
      this.$dao
        // initialize a jSON session with the tax calculation server
        .initSession()
        // method that processes the data received in the event of success
        .then(data => {
          // we process the data received
          this.doSomethingWithData(data);
        })
        // error handling method in case of error
        .catch(error => {
          // the error is traced back to the parent component
          this.$emit("error", error.message);
        }).finally(() => {
          // end of wait
          this.$emit("endWaiting");
        })
    }
  };
</script>

Comentários

  • linhas 4–6: O componente consiste num único alerta que exibe o valor devolvido pelo servidor de cálculo de impostos, mas apenas se a solicitação HTTP for bem-sucedida. Este alerta é controlado pela variável booleana [showMsg] na linha 17;
  • linhas 31–53: A solicitação HTTP é feita assim que o componente é criado. Portanto, o seu código é colocado no método [created] na linha 31;
  • linha 35: o componente pai é notificado de que a solicitação assíncrona está prestes a começar;
  • linhas 37–39: o método [this.$dao.initSession] é executado. Ele inicializa uma sessão JSON com o servidor de cálculo de impostos. O resultado imediato deste método é uma [Promise];
  • linhas 41–44: este código é executado quando o servidor devolve o seu resultado sem erros. O resultado do servidor encontra-se em [data]. Na linha 43, chamamos o método [doSomethingWithData] para processar este resultado;
  • linhas 46–49: este código é executado se ocorrer um erro durante a execução do pedido. Na linha 48, o componente pai é notificado de que ocorreu um erro, e a mensagem de erro [error.message] é-lhe passada;
  • Linhas 49–52: este código é executado em todos os casos. Notificamos o componente pai de que a solicitação HTTP está concluída;
  • Linhas 23–28: O método [doSomethingWithData] é responsável por processar os dados [data] enviados pelo servidor. Na linha 25, estes dados são armazenados e, na linha 27, são apresentados;

12.7. Executar o projeto

Image

Se o servidor de cálculo de impostos não estiver a funcionar quando o projeto for iniciado, obtém-se o seguinte resultado:

Image

Vamos iniciar o servidor [Laragon] (ver https://tahe.developpez.com/tutoriels-cours/php7) e recarregar a página acima. O resultado é então o seguinte:

Image

Nota: Estamos a utilizar a versão 14 do servidor de cálculo de impostos definido em https://tahe.developpez.com/tutoriels-cours/php7.

https://stahe.github.io
Este tutorial, escrito por Serge Tahé, é disponibilizado ao público sob os termos da Creative Commons Atribuição – Não comercial – Partilha igual 3.0 sem adaptações.