maaak9
maaak9
PostsComments
NNuxt
Created by maaak9 on 5/8/2024 in #❓・help
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>
1 replies