Requisição de Dados

Na Nuxt 2, temos duas maneiras de obter dados duma interface de programação de aplicação. Podemos utilizar o método fetch ou o método asyncData.

A Nuxt suporta os padrões tradicionais da Vue para carregar dados na nossa aplicação do lado do cliente, como buscar dados na função gatilho mounted() de um componente. As aplicações universais, no entanto, precisam de utilizar funções gatilhos específicas da Nuxt para poderem desenhar os dados durante a interpretação do lado do servidor. Isto permite que a nossa página seja desenhada com todos os dados necessários presentes.

A Nuxt tem duas funções gatilhos para o carregamento assíncrono de dados:

• asyncData. Esta função gatilho só pode ser colocada em componentes de página. Ao contrário da fetch, esta função gatilho não exibe um marcador de posição de carregamento durante a interpretação do lado do cliente: em vez disto, esta função gatilho bloqueia a navegação da rota até esta ser resolvida, exibindo um erro de página se falhar.
• fetch (Nuxt 2.12+). Esta função gatilho pode ser colocada em qualquer componente e fornece atalhos para desenhar os estados de carregamento (durante a interpretação do lado do cliente) e erros.

Estas funções gatilhos podem ser utilizadas com qualquer biblioteca de recolha de dados que escolhermos. Nós recomendamos utilizar @nuxt/http ou @nuxt/axios para fazer requisições às interfaces de programação de aplicação do protocolo de transferência de hipertexto. Mais informações sobre estas bibliotecas, tais como guias para configurar cabeçalhos de autenticação, podem ser encontradas na respetivas documentação.

A Função Gatilho fetch

A função fetch é uma função gatilho chamada durante a interpretação do lado do servidor após a instância do componente ser criada, e no cliente ao navegar. A função gatilho de busca de dados deve retornar uma promessa (seja explicitamente, ou implicitamente usando async/await) que será resolvida:

• No servidor, antes da página inicial ser interpretada.
• No cliente, algum tempo após o componente ser montado.

Utilização

Obtenção Dados

Dentro da função gatilho de busca de dados, teremos acesso à instância do componente através da this.

Alteração do Comportamento de Busca de Dados

• fetchOnServer: Boolean ou Function (predefinida como: true), chama fetch() quando a página é interpretada pelo servidor.
• fetchKey: String ou Function (por predefinição é o identificador único do âmbito de aplicação do componente ou o nome do componente), uma chave (ou uma função que produz uma chave exclusiva) que identifica o resultado da busca de dados deste componente (disponível na Nuxt 2.15+). Ao hidratar uma página interpretada do lado do servidor, esta chave é usada para mapear o resultado da fetch() do lado do servidor para os dados do componente do lado do cliente. Mais informações disponíveis no pedido original de atualização do repositório .
• fetchDelay: Integer (predefinida como: 200), define o tempo mínimo de execução em milissegundos (para evitar intermitências rápidas).

Quando fetchOnServer é falso (false ou retorna false), a fetch será chamada apenas no lado do cliente e $fetchState.pending retornará true quando o componente for interpretado do lado do servidor:

export default {
  data: () => ({
    posts: []
  }),
  async fetch() {
    this.posts = await this.$http.$get('https://api.nuxtjs.dev/posts')
  },
  fetchOnServer: false,
  // vários componentes podem retornar a mesma `fetchKey` e
  // a Nuxt rastreará ambos separadamente.
  fetchKey: 'site-sidebar',
  // alternativamente, para um maior controlo,
  // pode ser passada uma função com acesso à instância do componente.
  // Será chamada em `created` e não deve depender de dados obtidos.
  fetchKey(getCounter) {
    // `getCounter` é um método que pode ser chamado para obter
    // o número seguinte numa sequência
    // como parte da geração duma única `fetchKey`.
    return this.someOtherData + getCounter('sidebar')
  }
}

Acessar o Estado da Busca de Dados

A função gatilho fetch expõe this.$fetchState no nível do componente com as seguintes propriedades:

• pending é um Boolean que nos permite mostrar um marcador de posição quando fetch é chamada no lado do cliente.
• error é um null ou um Error lançado pela função gatilho de busca de dados
• timestamp é um marcador de tempo da última busca de dados, útil para armazenar transitoriamente com keep-alive .

Além da fetch ser chamada pela Nuxt, podemos chamar manualmente a fetch no nosso componente (para, por exemplo, recarregar os seus dados assíncronos) ao chamar this.$fetch():

<template>
  <div>
    <p v-if="$fetchState.pending">Fetching mountains...</p>
    <p v-else-if="$fetchState.error">An error occurred :(</p>
    <div v-else>
      <h1>Nuxt Mountains</h1>
      <ul>
        <li v-for="mountain of mountains">{{ mountain.title }}</li>
      </ul>
      <button @click="$fetch">Refresh</button>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        mountains: []
      }
    },
    async fetch() {
      this.mountains = await fetch(
        'https://api.nuxtjs.dev/mountains'
      ).then(res => res.json())
    }
  }
</script>

Ouvir as Alterações da Sequência de Caracteres de Consulta

A função gatilho fetch não é chamada sobre as mudanças da sequência de caracteres de consulta por padrão. Para observar as alterações na consulta, podemos adicionar um observador sobre $route.query e chamar $fetch:

export default {
  watch: {
    '$route.query': '$fetch'
  },
  async fetch() {
    // Chamado também sobre as mudanças da consulta
  }
}

Armazenamento em Memória Transitória

Podemos usar a diretiva keep-alive nos componentes <nuxt/> e <nuxt-child/> para economizar chamadas de fetch em páginas que já visitamos:

<template>
  <nuxt keep-alive />
</template>

Também podemos especificar as propriedades passadas para <keep-alive> passando uma propriedade keep-alive-props para o componente <nuxt>:

<nuxt keep-alive :keep-alive-props="{ max: 10 }" />

Mantém apenas 10 componentes de página na memória.

Manipulação de Erro

Podemos verificar a $fetchState.error e mostrar uma mensagem de erro se houver um erro na obtenção de dados:

<template>
  <div>
    <p v-if="$fetchState.pending">Loading....</p>
    <p v-else-if="$fetchState.error">Error while fetching mountains</p>
    <ul v-else>
      <li v-for="(mountain, index) in mountains" :key="index">
        {{ mountain.title }}
      </li>
    </ul>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        mountains: []
      }
    },
    async fetch() {
      this.mountains = await fetch(
        'https://api.nuxtjs.dev/mountains'
      ).then(res => res.json())
    }
  }
</script>

Usar a Função Gatilho activated

A Nuxt preencherá diretamente a this.$fetchState.timestamp (o registo de data e hora) da última chamada de fetch (interpretação do lado do servidor incluída). Podemos utilizar esta propriedade combinada com a função gatilho activated para adicionar uma memória transitória de 30 segundos a fetch:

<template> ... </template>

<script>
  export default {
    data() {
      return {
        posts: []
      }
    },
    activated() {
      // Chamar novamente a `fetch` se a última chamada de `fetch`
      // ocorreu há mais de 30 segundos.
      if (this.$fetchState.timestamp <= Date.now() - 30000) {
        this.$fetch()
      }
    },
    async fetch() {
      this.posts = await fetch('https://api.nuxtjs.dev/posts').then(res =>
        res.json()
      )
    }
  }
</script>

A navegação para a mesma página não chamará a fetch se a última chamada da fetch ocorreu há menos de 30 segundos.

Dados Assíncronos

A asyncData é outra função gatilho para a obtenção universal de dados. Ao contrário da fetch, que exige que definamos propriedades na instância do componente (ou despachemos ações da Vuex) para guardar o nosso estado assíncrono, a asyncData simplesmente combina o seu valor de retorno com o estado local do nosso componente. Eis um exemplo usando a biblioteca @nuxt/http :

<template>
  <div>
    <h1>{{ post.title }}</h1>
    <p>{{ post.description }}</p>
  </div>
</template>

<script>
  export default {
    async asyncData({ params, $http }) {
      const post = await $http.$get(`https://api.nuxtjs.dev/posts/${params.id}`)
      return { post }
    }
  }
</script>

Ao contrário da fetch, a promessa retornada pela função gatilho asyncData é resolvida durante a transição da rota. Isto significa que nenhum “marcador de posição de carregamento” é visível durante as transições do lado do cliente (embora a barra de carregamento possa ser utilizada para indicar um estado de carregamento ao utilizador). A Nuxt esperará que a função gatilho asyncData ser finalizada antes de navegar para a próxima página, ou exibirá a página de erro .

Esta função gatilho só pode ser utilizada para componentes do nível de página. Ao contrário da fetch, asyncData não pode acessar a instância do componente (this). Em vez disto, recebe o contexto como argumento. Podemos utilizá-la para buscar alguns dados e a Nuxt fará automaticamente uma fusão superficial do objeto retornado com os dados do componente.

Nos próximos exemplos, utilizamos @nuxt/http , o qual recomendamos para obtenção de dados duma interface de programação de aplicação.

Dados Assíncrono nos Componentes?

Uma vez que os componentes não têm um método asyncData, não podemos obter diretamente dados assíncronos do lado do servidor dentro de um componente. Para contornar esta limitação, temos três opções básicas:

1. Usar a nova função gatilho fetch)(#a-função-gatilho-fetch) que está disponível na Nuxt 2.12 e versões posteriores.
2. Fazer a chamada à interface de programação de aplicação na função gatilho mounted e definir as propriedades dos dados quando carregados. Desvantagem: Não funcionará para a interpretação do lado do servidor.
3. Fazer a chamada à interface de programação de aplicação no método asyncData do componente de página e passar os dados como propriedades aos subcomponentes. A interpretação do servidor funcionará corretamente. Desvantagem: a função gatilho asyncData da página pode ser menos legível porque carrega os dados para outros componentes.

Ouvir as Alterações da Consulta

Por predefinição, o método asyncData não é chamado sobre as alterações da sequência de caracteres de consulta. Se quisermos mudar este comportamento, por exemplo, ao construir um componente de paginação, podemos definir parâmetros que devem ser ouvidos com a propriedade watchQuery do nosso componente de página.