Nuxt•2y ago

useLazyFetch with slow api call

Hey! I'm having a hard time understanding the useLazyFetch.

I have an api call thats slow (simulated to take 3 seconds). I don't know if i have misunderstood the documentation. But i get a 3 second delay when i refresh the page. However if i first go to the home page and then navigate to the route where this code is located i don't get the 3s delay. Am i missing something? Or should i disable server for slow api calls like this and handle the loading state?

Heres the code I'm testing with

<script setup>
  const { data, pending } = await useFetch('https://reqres.in/api/users/1?delay=3', {
    lazy: true,
  })

</script>

<template>
  <div v-if="pending">
    loading
  </div>
  <div v-else>
    <h2>{{ data }}</h2>
  </div>
</template>

<script setup>
  const { data, pending } = await useFetch('https://reqres.in/api/users/1?delay=3', {
    lazy: true,
  })

</script>

<template>
  <div v-if="pending">
    loading
  </div>
  <div v-else>
    <h2>{{ data }}</h2>
  </div>
</template>

<script setup>
  const { data, pending } = await useFetch('https://reqres.in/api/users/1?delay=3', {
    lazy: true,
  })

</script>

<template>
  <div v-if="pending">
    loading
  </div>
  <div v-else>
    <h2>{{ data }}</h2>
  </div>
</template>

<script setup>
  const { data, pending } = await useFetch('https://reqres.in/api/users/1?delay=3', {
    lazy: true,
  })

</script>

<template>
  <div v-if="pending">
    loading
  </div>
  <div v-else>
    <h2>{{ data }}</h2>
  </div>
</template>

No replies yetBe the first to reply to this messageJoin

useLazyFetch with slow api call

Similar Threads

Similar Threads

Similar Threads