Nuxt•7mo 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>

0 Replies

No replies yetBe the first to reply to this messageJoin

Gaming

Programming

useLazyFetch with slow api call