Skip to content

14. Exemplo [nuxt-11]: Personalizar a imagem de carregamento

Por predefinição, a imagem de carregamento do [nuxt] é uma barra de progresso. O exemplo [nuxt-11] mostra que pode substituí-la pela sua própria imagem de carregamento:

Image

O exemplo [nuxt-11] também mostra como lidar com erros de carregamento.

Image

O exemplo [nuxt-11] deriva inicialmente do exemplo [nuxt-10]:

Image

Em [1], vamos adicionar um plugin para o cliente que será responsável por gerir eventos entre componentes.

14.1. O plugin [event-bus]

O plugin [event-bus] será executado tanto pelo cliente como pelo servidor, mas veremos que não funciona no lado do servidor. O seu código é o seguinte:


// on crée un bus d'événements entre les vues
import Vue from 'vue'
export default (context, inject) => {
  // le bus d'événements
  const eventBus = new Vue()
  // injection d'une fonction [eventBus] dans le contexte
  inject('eventBus', () => eventBus)
}
  • linha 5: o event bus é uma instância da classe [Vue]. Esta classe fornece métodos para lidar com eventos:
    • [$emit]: para emitir um evento;
    • [$on]: para ouvir um evento específico;

Este barramento de eventos irá lidar apenas com um evento, [loading], que será utilizado pelas páginas para iniciar/parar a animação de carregamento enquanto se aguarda a conclusão de uma função assíncrona;

  • linha 7: criamos uma função [$eventBus] (primeiro argumento) cuja função será devolver o objeto [eventBus] que acabámos de criar (segundo argumento). Esta função é injetada no contexto para que esteja disponível nos objetos [context.app] e [this] das páginas;

14.2. O layout [default.vue]

O layout [default.vue] evolui da seguinte forma:


<template>
  <div class="container">
    <b-card>
      <!-- un message -->
      <b-alert show variant="success" align="center">
        <h4>[nuxt-11] : personnalisation de l'attente, gestion des erreurs</h4>
      </b-alert>
      <!-- la vue courante du routage -->
      <nuxt />
      <!-- loading -->
      <b-alert v-if="showLoading" show variant="light">
        <strong>Requête au serveur de données en cours...</strong>
        <div class="spinner-border ml-auto" role="status" aria-hidden="true"></div>
      </b-alert>
      <!-- erreur de chargement -->
      <b-alert v-if="showErrorLoading" show variant="danger">
        <strong>La requête au serveur de données a échoué : {{ errorLoadingMessage }}</strong>
      </b-alert>
    </b-card>
  </div>
</template>
 
<script>
/* eslint-disable no-console */
export default {
  name: 'App',
  data() {
    return {
      showLoading: false,
      showErrorLoading: false
    }
  },
  // life cycle
  beforeCreate() {
    console.log('[default beforeCreate]')
  },
  created() {
    console.log('[default created]')
    // listen to the evt [loading]
    this.$eventBus().$on('loading', this.mShowLoading)
    // and the [errorLoadingMessage] event
    this.$eventBus().$on('errorLoading', this.mShowErrorLoading)
  },
  beforeMount() {
    console.log('[default beforeMount]')
  },
  mounted() {
    console.log('[default mounted]')
  },
  methods: {
    // load management
    mShowLoading(value) {
      console.log('[default mShowLoading], showLoading=', value)
      this.showLoading = value
    },
    // loading error
    mShowErrorLoading(value, errorLoadingMessage) {
      console.log('[default mShowErrorLoading], showErrorLoading=', value, 'errorLoadingMessage=', errorLoadingMessage)
      this.showErrorLoading = value
      this.errorLoadingMessage = errorLoadingMessage
    }
  }
}
</script>
  • linhas 11–14: a animação de carregamento. É exibida apenas se a propriedade [showLoading] for verdadeira (linha 29);
  • linhas 16–18: a mensagem de erro de carregamento. É exibida apenas se a propriedade [showErrorLoading] (linha 30) for verdadeira;
  • linhas 29-30: quando o componente é carregado inicialmente, a animação de carregamento é ocultada, assim como a mensagem de erro;
  • linhas 37–43: quando criada, a página aguarda o evento [loading] (primeiro argumento) no barramento de eventos criado pelo plugin. Ao recebê-lo, executa o método [mShowLoading] nas linhas 52–55 (segundo argumento);
  • linhas 52–55: O valor recebido pelo método [mShowLoading] será um booleano (verdadeiro/falso). É utilizado para mostrar ou ocultar a mensagem de carregamento;
  • linhas 41–42: Quando a página é criada, ela escuta o evento [errorLoading] (primeiro argumento) no barramento de eventos criado pelo plugin. Ao recebê-lo, ela executa o método [mShowErrorLoading] nas linhas 57–61 (segundo argumento);
  • linha 57: o método [mShowErrorLoading] recebe dois argumentos:
    • o primeiro argumento é um booleano (true/false) para mostrar ou ocultar a mensagem de erro;
    • o segundo argumento só está presente se tiver ocorrido um erro. Representa a mensagem de erro a ser exibida;
  • Os registos nas linhas 53 e 58 mostram-nos que os métodos [showLoading] e [showErrorLoading] não são executados no lado do servidor;

14.3. A página [page1]

O código da página [page1] altera-se da seguinte forma:


<!-- vue n° 1 -->
<template>
  <Layout :left="true" :right="true">
    <!-- navigation -->
    <Navigation slot="left" />
    <!-- message-->
    <b-alert slot="right" show variant="primary"> Page 1 -- result={{ result }} </b-alert>
  </Layout>
</template>
 
<script>
/* eslint-disable no-console */
/* eslint-disable nuxt/no-timing-in-fetch-data */
 
import Navigation from '@/components/navigation'
import Layout from '@/components/layout'
 
export default {
  name: 'Page1',
  // components used
  components: {
    Layout,
    Navigation
  },
  // asynchronous data
  asyncData(context) {
    // log
    console.log('[page1 asyncData started]')
    // start waiting
    context.app.$eventBus().$emit('loading', true)
    // no error
    context.app.$eventBus().$emit('errorLoading', false)
    // we make a promise
    return new Promise(function(resolve, reject) {
      // we simulate an asynchronous function
      setTimeout(function() {
        // end waiting
        context.app.$eventBus().$emit('loading', false)
        // log
        console.log('[page1 asyncData finished]')
        // we make the result asynchronous - a random number here
        resolve({ result: Math.floor(Math.random() * Math.floor(100)) })
      }, 5000)
    })
  },
 
  // life cycle
  beforeCreate() {
    console.log('[page1 beforeCreate]')
  },
  created() {
    console.log('[page1 created]')
  },
  beforeMount() {
    console.log('[page1 beforeMount]')
  },
  mounted() {
    console.log('[page1 mounted]')
  }
}
</script>
  • As alterações ocorrem na função [asyncData] nas linhas 26–47;
  • linhas 29–30: Antes de a função assíncrona começar, o evento [loading] é emitido para as outras páginas da aplicação. Note-se que em [asyncData] ainda não temos acesso ao objeto [this], que ainda não foi criado. Por isso, usamos o contexto passado como argumento para a função [asyncData] (linha 26);
  • linha 30: o barramento de eventos é utilizado para indicar que o carregamento está prestes a começar;
  • linha 38: Utilizamos o barramento de eventos para indicar que o carregamento está concluído;

Nota: Em tempo de execução, quando a página [page1] é solicitada ao servidor, a imagem de carregamento não é exibida. Nos registos, vemos que, no lado do servidor, o método [default.mShowLoading] não é chamado. De qualquer forma, ver a imagem de carregamento não faz sentido quando a página é solicitada ao servidor. O servidor só envia a página para o navegador do cliente depois de a função [asyncData] ter terminado. A imagem de carregamento é, portanto, desnecessária. Este será o caso para todas as páginas da aplicação solicitadas diretamente ao servidor.

14.4. A página [index]

O código da página [index] é o seguinte:


<!-- page principale -->
<template>
  <Layout :left="true" :right="true">
    <!-- navigation -->
    <Navigation slot="left" />
    <!-- message-->
    <b-alert slot="right" show variant="warning">
      Home
    </b-alert>
  </Layout>
</template>
 
<script>
/* eslint-disable no-undef */
/* eslint-disable no-console */
/* eslint-disable nuxt/no-env-in-hooks */
/* eslint-disable nuxt/no-timing-in-fetch-data */
 
import Navigation from '@/components/navigation'
import Layout from '@/components/layout'
 
export default {
  name: 'Home',
  // components used
  components: {
    Layout,
    Navigation
  },
  // asynchronous data
  asyncData(context) {
    // log
    console.log('[page1 asyncData started]')
    // start waiting
    context.app.$eventBus().$emit('loading', true)
    // no error
    context.app.$eventBus().$emit('errorLoading', false)
    // we make a promise
    return new Promise(function(resolve, reject) {
      // we simulate an asynchronous function
      setTimeout(function() {
        // end waiting
        context.app.$eventBus().$emit('loading', false)
        // log
        console.log('[page1 asyncData finished]')
        // we return an error
        reject(new Error("le serveur n'a pas répondu assez vite"))
      }, 5000)
    }).catch((e) => context.error({ statusCode: 500, message: e.message }))
  },
  // life cycle
  beforeCreate() {
    console.log('[home beforeCreate]')
  },
  created() {
    console.log('[home created]')
  },
  beforeMount() {
    console.log('[home beforeMount]')
  },
  mounted() {
    console.log('[home mounted]')
    // no error
    this.$eventBus().$emit('errorLoading', false)
  }
}
</script>
  • linhas 30–49: a função [asyncData] é idêntica à da página [page1], com uma exceção: na linha 46, a função assíncrona é encerrada em caso de falha (usando o método [reject]);
  • linha 46: o parâmetro da função [reject] é uma instância da classe [Error]. O parâmetro do construtor [Error] é a mensagem de erro;
  • linha 48: este erro é capturado pelo método [catch] do [Promise], que recebe o erro como parâmetro. Em seguida, usamos a função [context.error] para reportar o erro. O parâmetro da função [context.error] é um objeto com duas propriedades aqui:
    • [statusCode]: um código de erro HTTP;
    • [message]: uma mensagem de erro;

Quer o [asyncData] seja executado pelo cliente ou pelo servidor, no caso de um [context.error], o [nuxt] apresenta a página [layouts/error.vue]:

Image

Embora seja uma página, a página [error.vue] é procurada na pasta [layouts] (talvez para evitar que seja incluída nas rotas da aplicação?). Aqui, a página [error.vue] é a seguinte:


<!-- définition HTML de la vue -->
<template>
  <!-- mise en page -->
  <Layout :left="true" :right="true">
    <!-- alerte dans la colonne de droite -->
    <template slot="right">
      <!-- message sur fond jaune -->
      <b-alert show variant="danger" align="center">
        <h4>L'erreur suivante s'est produite : {{ JSON.stringify(error) }}</h4>
      </b-alert>
    </template>
    <!-- menu de navigation dans la colonne de gauche -->
    <Navigation slot="left" />
  </Layout>
</template>
 
<script>
/* eslint-disable no-undef */
/* eslint-disable no-console */
/* eslint-disable nuxt/no-env-in-hooks */
 
import Layout from '@/components/layout'
import Navigation from '@/components/navigation'
 
export default {
  name: 'Error',
  // components used
  components: {
    Layout,
    Navigation
  },
  // property [props]
  props: { error: { type: Object, default: () => 'waiting ...' } },
  // life cycle
  beforeCreate() {
    // client and server
    console.log('[error beforeCreate]')
  },
  created() {
    // client and server
    console.log('[error created, error=]', this.error)
  },
  beforeMount() {
    // customer only
    console.log('[error beforeMount]')
  },
  mounted() {
    // customer only
    console.log('[error mounted]')
  }
}
</script>

Quando o [nuxt] renderiza a página [error.vue], passa o erro que ocorreu como uma propriedade [props] (linha 33). Se o erro foi causado por [context.error(object1)], a propriedade [props] da página [error.vue] terá o valor [object1]. A documentação do [nuxt] indica que [object1] deve ter, no mínimo, os atributos [statusCode, message]. A linha 9 apresenta a cadeia JSON do objeto [object1] recebido.

14.5. A página [page2]

A página [page2] mostra outra forma de lidar com o erro:

  • na [page1], o erro é exibido numa página separada [error.vue];
  • em [page2], o erro será exibido na página [page2] que causou o erro;

O código para [página2] é o seguinte:


<!-- vue n° 2 -->
<template>
  <Layout :left="true" :right="true">
    <!-- navigation -->
    <Navigation slot="left" />
    <!-- message -->
    <b-alert slot="right" show variant="secondary">
      Page 2
    </b-alert>
  </Layout>
</template>
 
<script>
/* eslint-disable no-console */
/* eslint-disable nuxt/no-timing-in-fetch-data */
 
import Navigation from '@/components/navigation'
import Layout from '@/components/layout'
 
export default {
  name: 'Page2',
  // components used
  components: {
    Layout,
    Navigation
  },
  // asynchronous data
  asyncData(context) {
    // log
    console.log('[page2 asyncData started]')
    // start waiting
    context.app.$eventBus().$emit('loading', true)
    // no error
    context.app.$eventBus().$emit('errorLoading', false)
    // we make a promise
    return new Promise(function(resolve, reject) {
      // we simulate an asynchronous function
      setTimeout(function() {
        // end waiting
        context.app.$eventBus().$emit('loading', false)
        // arbitrarily generate an error
        const errorLoadingMessage = "le serveur n'a pas répondu assez vite"
        // successful completion
        resolve({ showErrorLoading: true, errorLoadingMessage })
        // log
        console.log('[page2 asyncData finished]')
      }, 5000)
    })
  },
  // life cycle
  beforeCreate() {
    console.log('[page2 beforeCreate]')
  },
  created() {
    console.log('[page2 created]')
  },
  beforeMount() {
    console.log('[page2 beforeMount]')
  },
  mounted() {
    console.log('[page2 mounted]')
    // customer
    if (this.showErrorLoading) {
      console.log('[page2 mounted, showErrorLoading=true]')
      this.$eventBus().$emit('errorLoading', true, this.errorLoadingMessage)
    }
  }
}
</script>

Mais uma vez, inserimos uma função [asyncData] no código da página e, tal como [index], [page2] irá gerar um erro que, desta vez, iremos tratar de forma diferente.

  • linha 44: tanto o servidor como o cliente resolvem a promessa com sucesso, devolvendo o resultado [{ showErrorLoading: true, errorLoadingMessage }]. Sabemos que isto irá incluir as propriedades [showErrorLoading, errorLoadingMessage] nas propriedades [data] da página e que o cliente irá receber essas propriedades;
  • linhas 60–67: sabemos que a função [mounted] é executada apenas pelo cliente;
  • linha 63: o cliente verifica se a propriedade [showErrorLoading] foi definida (pelo servidor ou pelo cliente, conforme apropriado). Se for o caso, emite o evento [‘errorLoading’] (linha 65) para que a página [default] exiba a mensagem de erro [this.errorLoadingMessage]. Por fim, o servidor envia uma página sem que seja exibida qualquer mensagem de erro. A mensagem de erro é exibida no último momento pelo cliente quando a página é «montada»;

14.6. Execução

14.6.1. [nuxt.config]

O ficheiro de tempo de execução [nuxt.config.js] é o seguinte:


export default {
  mode: 'universal',
  /*
   ** Headers of the page
   */
  head: {
    title: 'Introduction à [nuxt.js]',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      {
        hid: 'description',
        name: 'description',
        content: 'ssr routing loading asyncdata middleware plugins store'
      }
    ],
    link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }]
  },
  /*
   ** Customize the progress-bar color
   */
  loading: false,
 
  /*
   ** Global CSS
   */
  css: [],
  /*
   ** Plugins to load before mounting the App
   */
  plugins: [{ src: '@/plugins/event-bus' }],
  /*
   ** Nuxt.js dev-modules
   */
  buildModules: [
    // Doc: https://github.com/nuxt-community/eslint-module
    '@nuxtjs/eslint-module'
  ],
  /*
   ** Nuxt.js modules
   */
  modules: [
    // Doc: https://bootstrap-vue.js.org
    'bootstrap-vue/nuxt',
    // Doc: https://axios.nuxtjs.org/usage
    '@nuxtjs/axios'
  ],
  /*
   ** Axios module configuration
   ** See https://axios.nuxtjs.org/options
   */
  axios: {},
  /*
   ** Build configuration
   */
  build: {
    /*
     ** You can extend webpack config here
     */
    extend(config, ctx) {}
  },
  // source code directory
  srcDir: 'nuxt-11',
  // router
  router: {
    // application URL root
    base: '/nuxt-11/'
  },
  // server
  server: {
    // service port, default 3000
    port: 81,
    // network addresses listened to, default localhost: 127.0.0.1
    // 0.0.0.0 = all the machine's network addresses
    host: 'localhost'
  }
}
  • linha 22: defina a propriedade [loading] como [false] para que o [nuxt] não utilize a sua imagem de carregamento predefinida;
  • linha 31: o plugin que define o barramento de eventos;

14.6.2. A página [index] servida pelo servidor

Vamos solicitar a página [index] ao servidor (digitamos a URL [http://localhost:81/nuxt-11/] manualmente). A página apresentada pelo navegador do cliente é a seguinte:

Image

Os registos são os seguintes:

Image

  • em [3], vemos que o servidor envia a página [error.vue];
  • Em [4], vemos que o cliente também exibe a página [error] com o mesmo erro que o servidor;
  • Podemos ver que o método [mShowLoading] da página [default] não foi chamado no lado do servidor, apesar de a página [index] ter acionado uma espera. Este método é chamado ao receber um evento e, claramente, o tratamento de eventos não está implementado no lado do servidor;

Vamos examinar o código-fonte da página recebida pelo navegador do cliente:


<!doctype html>
<html data-n-head-ssr>
<head>
  <title>Introduction à [nuxt.js]</title>
  <meta data-n-head="ssr" charset="utf-8">
  <meta data-n-head="ssr" name="viewport" content="width=device-width, initial-scale=1">
  <meta data-n-head="ssr" data-hid="description" name="description" content="ssr routing loading asyncdata middleware plugins store">
  <link data-n-head="ssr" rel="icon" type="image/x-icon" href="/favicon.ico">
  <base href="/nuxt-11/">
  <link rel="preload" href="/nuxt-11/_nuxt/runtime.js" as="script">
  <link rel="preload" href="/nuxt-11/_nuxt/commons.app.js" as="script">
  <link rel="preload" href="/nuxt-11/_nuxt/vendors.app.js" as="script">
  <link rel="preload" href="/nuxt-11/_nuxt/app.js" as="script">
  ...
</head>
<body>
  <div data-server-rendered="true" id="__nuxt">
    <div id="__layout">
      <div class="container">
        <div class="card">
          <div class="card-body">
            <div role="alert" aria-live="polite" aria-atomic="true" align="center" class="alert alert-success">
            <h4>[nuxt-11] : personnalisation de l'attente, gestion des erreurs</h4>
              </div>
            <div>
              <div class="row">
                <div class="col-2">
                  <ul class="nav flex-column">
                    <li class="nav-item">
                      <a href="/nuxt-11/" target="_self" class="nav-link active nuxt-link-active">
                        Home
                      </a>
                    </li>
                    <li class="nav-item">
                      <a href="/nuxt-11/page1" target="_self" class="nav-link">
                        Page 1
                      </a>
                    </li>
                    <li class="nav-item">
                      <a href="/nuxt-11/page2" target="_self" class="nav-link">
                        Page 2
                      </a>
                    </li>
                  </ul>
                </div> <div class="col-10"><div role="alert" aria-live="polite" aria-atomic="true" align="center" class="alert alert-danger">
                <h4>L'erreur suivante s'est produite : {&quot;statusCode&quot;:500,&quot;message&quot;:&quot;le serveur n'a pas répondu assez vite&quot;}</h4>
                    </div>
                </div>
              </div>
            </div>  
          </div>
        </div>
      </div>
    </div>
  </div>
  <script>window.__NUXT__ = (function (a, b, c, d) {
  d.statusCode = 500; d.message = "le serveur n'a pas répondu assez vite";
  return {
    layout: "default", data: [d], error: d, serverRendered: true,
    logs: [
      { date: new Date(1575047424168), args: ["[event-bus créé]"], type: a, level: b, tag: c },
      { date: new Date(1575047424175), args: ["[page1 asyncData started]"], type: a, level: b, tag: c },
      { date: new Date(1575047429455), args: ["[page1 asyncData finished]"], type: a, level: b, tag: c },
      { date: new Date(1575047429515), args: ["[default beforeCreate]"], type: a, level: b, tag: c },
      { date: new Date(1575047429675), args: ["[default created]"], type: a, level: b, tag: c },
      { date: new Date(1575047430157), args: ["[error beforeCreate]"], type: a, level: b, tag: c },
      { date: new Date(1575047430246), args: ["[error created, error=]", "{ statusCode: 500,\n  message: 'le serveur n\\'a pas répondu assez vite' }"], type: a, level: b, tag: c }]
  }
    }("log", 2, "", {}));</script>
  <script src="/nuxt-11/_nuxt/runtime.js" defer></script>
  <script src="/nuxt-11/_nuxt/commons.app.js" defer></script>
  <script src="/nuxt-11/_nuxt/vendors.app.js" defer></script>
  <script src="/nuxt-11/_nuxt/app.js" defer></script>
</body>
</html>
  • linha 57: vemos que o servidor enviou um objeto [d] representando o erro que ocorreu no lado do servidor;
  • linha 59: vemos uma propriedade [error] cujo valor é o objeto [d]. Podemos assumir que é a presença da propriedade [error] na página enviada pelo servidor que faz com que os scripts do lado do cliente exibam a página [error.vue] com o erro [error];

14.6.3. A página [page1] executada pelo servidor

Digitamos manualmente a URL [http://localhost:81/nuxt-11/page1]. Após 5 segundos, o navegador exibe a seguinte página:

Image

Os registos apresentados são os seguintes:

Image

  • em [1], os registos do servidor. Note-se que o método [mShowLoading] da página [default] não foi chamado;
  • em [2], os registos do cliente;

14.6.4. A página [page2] executada pelo servidor

Digitamos manualmente o URL [http://localhost:81/nuxt-11/page2]. Após 5 segundos, o navegador exibe a seguinte página:

Image

Vamos examinar os registos apresentados no navegador:

Image

  • em [1], os registos do servidor. Recorde-se que o servidor incluiu as propriedades [showErrorLoading, errorLoadingMessage] na página enviada para o navegador do cliente. Sabemos que estas propriedades serão então incluídas nos [dados] da página apresentada pelo cliente
  • em [3], quando a página [page2] é carregada, encontra a propriedade [showErrorLoading] definida como true. Em seguida, envia um evento para a página [default], para que esta exiba a mensagem de erro enviada pelo servidor [4];

14.6.5. A página [index] executada pelo cliente

Utilizamos agora os links de navegação para exibir as três páginas. Todas as páginas exibidas pelo cliente são idênticas às exibidas pelo servidor. A única diferença é que a imagem de carregamento de 5 segundos é exibida em cada ocasião.

Começamos pela página [index]. A imagem de carregamento é então exibida:

Image

depois, após 5 segundos, aparece a seguinte página:

Image

A página final é, portanto, idêntica à obtida no lado do servidor.

Image

Lembre-se da função [asyncData] na página [index]:


asyncData(context) {
    // log
    console.log('[page1 asyncData started]')
    // start waiting
    context.app.$eventBus().$emit('loading', true)
    // no error
    context.app.$eventBus().$emit('errorLoading', false)
    // we make a promise
    return new Promise(function(resolve, reject) {
      // we simulate an asynchronous function
      setTimeout(function() {
        // end waiting
        context.app.$eventBus().$emit('loading', false)
        // log
        console.log('[page1 asyncData finished]')
        // we return an error
        reject(new Error("le serveur n'a pas répondu assez vite"))
      }, 5000)
    }).catch((e) => context.error({ statusCode: 500, message: e.message }))
}

Os registos do cliente são os seguintes:

Image

  • em [1], a função [asyncData] é iniciada;
  • em [2], a imagem de carregamento é exibida;
  • em [2-3], vemos que a página [default] recebeu os eventos [loading, true] [2] e [errorLoading, false] enviados pela função [asyncData] da página [index] (linhas 5 e 7);
  • em [4], a espera termina. A página [default] recebeu o evento [loading, false] enviado pela página [index] (linha 13);
  • Em [5], a função [asyncData] concluiu o seu trabalho;
  • como a função [asyncData] gerou um erro com [context.error] (linha 19), a página [error] é exibida [6];

14.6.6. A página [page1] executada pelo cliente

Após esperar 5 segundos, o cliente exibe a seguinte página:

Image

Vamos rever o código da função [asyncData] da [page1]:


asyncData(context) {
    // log
    console.log('[page1 asyncData started]')
    // start waiting
    context.app.$eventBus().$emit('loading', true)
    // no error
    context.app.$eventBus().$emit('errorLoading', false)
    // we make a promise
    return new Promise(function(resolve, reject) {
      // we simulate an asynchronous function
      setTimeout(function() {
        // end waiting
        context.app.$eventBus().$emit('loading', false)
        // log
        console.log('[page1 asyncData finished]')
        // we make the result asynchronous - a random number here
        resolve({ result: Math.floor(Math.random() * Math.floor(100)) })
      }, 5000)
    })
},

Os registos são os seguintes:

Image

14.6.7. A página [page2] executada pelo cliente

Após uma espera de 5 segundos, o cliente apresenta a seguinte página:

Image

Vamos rever o código das funções [asyncData] e [mounted] na [página2]:


asyncData(context) {
    // log
    console.log('[page2 asyncData started]')
    // start waiting
    context.app.$eventBus().$emit('loading', true)
    // no error
    context.app.$eventBus().$emit('errorLoading', false)
    // we make a promise
    return new Promise(function(resolve, reject) {
      // we simulate an asynchronous function
      setTimeout(function() {
        // end waiting
        context.app.$eventBus().$emit('loading', false)
        // arbitrarily generate an error
        const errorLoadingMessage = "le serveur n'a pas répondu assez vite"
        // successful completion
        resolve({ showErrorLoading: true, errorLoadingMessage })
        // log
        console.log('[page2 asyncData finished]')
      }, 5000)
    })
  }
 
mounted() {
    console.log('[page2 mounted]')
    // customer
    if (this.showErrorLoading) {
      console.log('[page2 mounted, showErrorLoading=true]')
      this.$eventBus().$emit('errorLoading', true, this.errorLoadingMessage)
    }
}

Os registos são os seguintes:

Image

  • Em [1], a página [default] recebeu o evento [showErrorLoading, true] enviado pela [page2] (linha 29), que a instrui a exibir a mensagem de erro;
https://stahe.github.io
Este curso-tutorial escrito por Serge Tahé é disponibilizado ao público de acordo com os termos da Licença Creative Commons Atribuição – Sem uso comercial – Partilha nas mesmas condições 3.0 não adaptada.