Pada Nuxt.js Kami memiliki 2 cara untuk mendapatkan data dari sebuah antarmuka pemrograman aplikasi (API). Kami dapat menggunakan metode fetch atau metode asyncData.

The fetch hook

Pengait fetch Nuxt.js dipanggil setelah instance komponen dibuat pada sisi server: this juga tersedia di dalamnya.

export default {
  async fetch() {
    console.log(this)
  }
}

Kapan menggunakan fetch?

Setiap kali Anda harus mengambil data asinkron, fetch dipanggil pada sisi server ketika me-render rute dan pada sisi klien ketika menggunakan navigasi.

Hal tersebut mengekspos $fetchState pada tingkatan komponen dengan properti sebagai berikut ini:

• pending merupakan sebuah Boolean, mengizinkan Anda untuk menampilkan placeholder ketika fetch dipanggil pada sisi klien
• error dapat berupa antara null atau Error dan mengizinkan Anda untuk menampilkan pesan kegalatan (error)
• timestamp merupakan cap waktu dari terakhir kali pengambilan, berguna untuk menembolok (cache) dengan keep-alive

Anda juga memiliki akses ke this.$fetch(), ini berguna jika Anda ingin memanggil hook fetch di komponen Anda.

<template>
  <p v-if="$fetchState.pending">Mengambil gunung...</p>
  <p v-else-if="$fetchState.error">Terjadi kegalatan :(</p>
  <div v-else>
    <h1>Gunung selanjutnya</h1>
    <ul v-for="mountain of mountains">
      <li>{{ mountain.title }}</li>
    </ul>
    <button @click="$fetch">Segarkan</button>
  </div>
</template>

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

Opsi

fetchOnServer: Boolean atau Function (nilai anggapan: true), memanggil fetch() ketika server me-render halaman.

fetchDelay: Integer (nilai anggapan: 200), menetapkan waktu eksekusi minimal dalam milidetik (untuk menghindari eksekusi yang terlalu cepat)

Ketika fetchOnServer bernilai salah (false atau mengembalikan false), fetch akan dipanggil hanya pada sisi klien dan $fetchState.pending akan mengembalikan true ketika server me-render komponen.

export default {
  data() {
    return {
      posts: []
    }
  },
  async fetch() {
    this.posts = await fetch('https://api.nuxtjs.dev/posts').then(res =>
      res.json()
    )
  },
  // memanggil fetch hanya pada sisi klien
  fetchOnServer: false
}

Memperhatikan perubahan untaian kueri (query string)

Pada dasarnya, pengait fetch tidak dipanggil pada perubahan untaian kueri. Untuk melakukan watch untuk perubahan kueri, Anda dapat menambahkan watcher pada $route.query dan memanggil $fetch:

export default {
  watch: {
    '$route.query': '$fetch'
  },
  async fetch() {
    // juga dipanggil pada perubahan kueri
  }
}

Tembolok

Anda dapat menggunakan direktif keep-alive di komponen <nuxt/> dan <nuxt-child/> untuk menyimpan pemanggilan fetch pada halaman yang Anda telah kunjungi:

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

Anda juga dapat melakukan spesifikasi pada props yang dikirimkan ke <keep-alive> dengan mengirimkan keep-alive-props ke komponen <nuxt>.

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

Menyimpan hanya 10 komponen halaman dalam memori.

Menggunakan pengait activated

Nuxt akan secara langsung mengisi this.$fetchState.timestamp (cap waktu) dari terakhir kali fetch dipanggil (termasuk render sisi server). Anda dapat menggunakan properti ini dikombinasikan dengan pengait activated untuk menambahkan tembolok selama 30 detik ke fetch:

<template> ... </template>

<script>
  export default {
    data() {
      return {
        posts: []
      }
    },
    activated() {
      // Memanggil fetch lagi jika terakhir fetch dipanggil lebih dari 30 detik yang lalu
      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>

Melakukan navigasi ke halaman yang sama tidak akan memanggil fetch kembali jika terakhir memanggil fetch masih kurang dari 30 detik yang lalu.

Data Asinkron

Perbedaan utama antara fetch adalah Anda tidak perlu menangani status (state) yang tertunda atau galat. Nuxt akan menunggu pengait asyncData selesai sebelum menavigasi ke halaman selanjutnya atau menampilkan halaman kegalatan)

Pengait menerima konteks (context) sebagai argumen pertama. Anda dapat menggunakan ini untuk menggambil beberapa data dan Nuxt.js akan secara otomatis mengabungkan objek yang dikembalikan dengan data pada komponen.

<template>
  <h1>{{ project }}</h1>
</template>

<script>
  export default {
    async asyncData(context) {
      return {
        project: 'nuxt'
      }
    }
  }
</script>

Pada contoh berikut ini, Kami menggunakan @nuxt/http yang mana Kami merekomendasikan untuk menggambil data dari antarmuka pemrograman aplikasi (API).

Pertama, kita perlu memasang paket ini:

yarn add @nuxt/http

npm install @nuxt/http

Lalu, tambahkan ini ke bagian modules dari nuxt.config.js:

export default {
  modules: ['@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>

Memperhatikan perubahan pada kueri

Metode asyncData tidak dipanggil pada perubahan untaian kueri pada dasarnya. Jika Anda ingin mengubah sikap ini, contohnya ketika membangun sebuah komponen paginasi, Anda dapat menentukan parameter yang akan diperhatikan oleh properti watchQuery pada komponen halaman Anda.