Hey there! We’ve got some exciting news to share with you about the new Nuxt 3 update! It comes with a ton of new feature APIs, including one called useLazyFetch. While this API can be incredibly beneficial for optimizing application performance, we recommend that you first get acquainted with the useFetch API. Understanding the use of useFetch can give you a better idea of how to make use of useLazyFetch in your development projects.
But don’t worry, it’s not a complicated process. With just a bit of effort in understanding the foundations of useFetch, you can implement useLazyFetch with ease. This will allow you to optimize your Vue 3 development skills and provide an even better user experience. So let’s dive into the world of useFetch and useLazyFetch!
API: useFetch
useFetch is a wrapper around useAsyncData and $fetch. You can simply think that using $fetch to get data back and box the data into useAsyncData type and return back. The official document explains this pretty well with details: https://nuxt.com/docs/api/composables/use-fetch
If you are familiar with the Axios HTTP, https://axios-http.com/docs/intro. They have many common methods and usage. One benefit is that the data from useFetch can be always given a computed or ref value, which is very connivance to Vue development. Please see the following simple example:
<script setup>const { data, pending, error, refresh } = await useFetch(`https://api.nuxtjs.dev/mountains/${route.params.slug}`, {
pick: ['title']
});</script> <template>
<div>
<h1>{{ data.name }}</h1>
<p>{{ data.content }}</p>
</div>
</template>
Next, let’s get into the useLazyFetch API.
API: useLazyFetch
‘UseLazyFetch’, despite being a seemingly straightforward concept, is actually an incredibly useful tool that provides valuable functionality to developers. Essentially, ‘UseLazyFetch’ is a wrapper around the ‘useFetch’ API, but with an added advantage of the ‘lazy’ option being set to ‘true’. This is where things get interesting. By default, when using the ‘useFetch’ API, navigation is blocked until the asynchronous handler is resolved, which means that it’s impossible to continue with any actions on the current page until the new page is loaded.
However, with ‘UseLazyFetch’, this issue is eliminated. For example, let’s say a user is on the homepage and decides to click on a link that directs them to a news page. When using the ‘useFetch’ API, the user would be forced to wait for the data to load before the new page would begin rendering, causing the entire page to halt. However, with ‘UseLazyFetch’, the page can be redirected immediately upon clicking the link, and a loading icon will be displayed while the data is loaded and the page is rendered. This will dramatically improve the user experience.
Tricky part:
Although it sounds straightforward, there are some additional considerations to be made. In the real world, ‘Watch’ may encounter some challenges when used in conjunction with ‘UseLazyFetch’. When the page first loads, for example, ‘UseLazyFetch’ + ‘Watch’ may face racing issues that prevent data from being loaded properly. To avoid such issues, we’ve provided a code example below for your reference. You can also visit the official document page at https://nuxt.com/docs/api/composables/use-lazy-fetch.
const showSpinner = ref(true);
const newsData = reactive({items: []});
// get async data
// when page loads directly,
// it already return data back so we need line #16 to process data directly.
// However, when route redirect to here,
// the data cannot be return in time even with await so that we need code #23 to watch the data.
const result = await useLazyFetch(`/api/cryptocurrencies/news`, {
method: 'get',
params: {
feeds: 'false'
}
});
// this code handles the page directly loads scenario.
if (result.data === 'Success') {
newsData.items = result.data;
showSpinner.value = false;
}
// once the data is return, the page can be rendered.
// However, when the page loads directly,
// the newValue has been assigned by the line #5.
watch(result.data, (newValue) => {
newsData.items = newValue.Data;
showSpinner.value = false;
});
Now the article is finished. Hope everyone likes and feel free to post any comments and I will try my best to answer. If my code has anything wrong, please also feel free to let me know!
Thank you!
PS: I also use PyChart to develop python: https://quietbookspace.com/how-fix-relative-import-importerror-in-pycharm/. Feel free to checkout that article.
Views: 49
