[Vuejs]-VueJs Async Api Data best practice

by

2👍

✅

console.log is not something that you can really trust 100% of the time for async debugging tbh.
console.log(JSON.parse(JSON.stringify())) can help a bit more but it’s still have some drawbacks sometimes.

As for best practices, both beforeCreate and created do run on both sides (server + client) so it’s fine to use those. You can also use asyncData and the new fetch (it’s a Nuxt hook, not the actual fetch API).

Beware of using the async/await syntax properly tho (no need for then here):

async created() {
  const response = await Meta.getMeta()
  this.meta = response.data
  console.log(this.meta)
}

Also, with proper async/await, this one will never happen actually

because the site is loading before the api data has been initialised

You can read a bit more about the Nuxt lifecycle here: https://nuxtjs.org/docs/2.x/concepts/nuxt-lifecycle

I’d recommend usually going the async fetch() way (non blocking, nice helpers), or async asyncData() if you need a blocking method. Middlewares can also be useful to make the whole process more flexible around your application.

You can get the whole explanation between the differences of fetch vs asyncData here: https://nuxtjs.org/blog/understanding-how-fetch-works-in-nuxt-2-12/

And if you want to have an example on how to use fetch in a real world scenario, you can read this one: https://nuxtjs.org/blog/build-dev-to-clone-with-nuxt-new-fetch/

👤kissu

1👍

So, It turns out that I got this the completely wrong way around.
In the newest nuxt versions, async fetch method is now included (build in).

With this, all rendering etc works fine and as expected.
My ended working code looks like this now:

<script>
export default {
  async fetch () {
    this.meta = await fetch(
      'https://testurl.com/meta'
    ).then(res => res.json())
  },
  data () {
    return {
      meta: null
    }
  }
}
</script>

And the beauty with fetch, is that you can add listeners" like so:

<p v-if="$fetchState.pending">Fetching site</p>
<p v-else-if="$fetchState.error">Error happened</p>
<p>This content will be rendered server side even though waiting time</p>

I’m just posting this because my original question was a bit miss explained, and hope to help somebody else.

Edit:
I have marked kissu as answer (did see the post after i created this one), because it was explained so nice and well done!
Thanks 🙂

👤simon

Leave a comment