Transcript for:
Async Data Management in Vue

let's talk now about use assing data within our page components and plugins can use use assing data to get access to data that resolve asynchronously and we have a definition about the difference between use Fetch and use Asing data use fetch receives the URL and gets that data whereas using data might have more complex logic use fetch URL is equivalent to user sync URL fetch URL it's developer experience sugar for most common use case and down there we've got an example of actually this user syn data which actually is fetching an endpoint with a counter uh their example and this user sync with this time a key and another URL and a function which calls actually dollar Fetch and it returns a promise and it's using the call back that you will put in it so there we've got this fetch which is there and we've got this user syn data so the best thing is to put an example in my endpoint I'm going to create a new function which actually will wait for a promise on a product count so we've got a product count value up there and after 2 millisecs or 2 seconds we are going to actually increment this product count and find finally we are going to return this product count so when we are going to call this/ Api SL product we will wait for 2,000 milliseconds so we will need on the uh index. viw to wait for that call so it would be a synchronous and finally we will return our product count so back in my index. view what I will need to do is to use assing data on a key which could be product and there what we would need to do is to open this function and this is our call back we will have the answer of this Fetch and this is this fetch that is going to make the call and remember this promise will be return and then we will get the data and we will have our pending there so I'm going to get back I'm going to update and what we see is that there we go we've got our product count but there was no pending now I know that my server is running and that there is this uh action every time I fetch this incremental uh function what I can do is here using a function to refresh my call so what I'm going to do actually is to declare in my template a button and this button will trigger a function that will be called refresh and this refresh function will use another function provided by n which is refresh n data and here this is where I'm going to use the key of my function so I got products which is there so I get back and when I click we see that I got finally my loading because it's already uh rendered and every time I refresh it's incrementing my product count okay so now I'm going to use actually use lazy uh assn data and it's the same uh thing as um use uh um use lazy fetch sorry if instead of having an incremental function we would have a set interval that would be actually um triggered every second now what I what I have is this use lazy as sync however I don't have any asynchronous uh actions there so what I can be back is on user sync data and when I get back and I click on refresh we see that it's been 33 actually said product count but it's actually seconds I got 36 seconds 42 seconds that my server has been running because it's already turning there and we've got this product count incremental every second we saw that next3 is providing to us several method to fetch data the first method is use Fetch and actually use fetch which is a composable help us to fetch data universally so on front side and on the backend side and we can fetch that from any URL and actually use fetch is a combination between asynchronous call which is can be used with the composable usering data and dollar fetch which is coming from the method of fetch from the library and the organization of nggs we also saw that we got many other options that we can pass on our fetching composable provided by next and this function can help us to watch some elements to refresh or to put some adders some keys method queries and params also no fre is working with cache and we've got a function called clear no data that help us to clear the cache data that we fetch because when we use with assing data the key we got some cache that can implies some data that will be not fresh to refresh the data you can use the clear next data function the common problem is to pass the client headers to your API and there is a method uh provided by n which is use request header and we see here that we can pass directly the headers on use fetch