Sometimes you need to make multiple requests to different API endpoints in order to gather all the information needed to display your current page. Now, ideally, you're able to make just one API request to a single API endpoint, and hopefully you're in control of those API endpoints to be able to do that, but a lot of times you're not. So let's say, for example, that you have a blog post that you want to display. And in order to get the author for the blog post, you have to make a request to one API endpoint.
In order to get the comments for the blog post, you need to make a request to another API endpoint. Now, I've just simulated the request here. All this slash API slash sleep does over here is it takes the duration parameter, which is this last parameter here on the end. So for the author, I have said, take two seconds to complete the request.
and for comments take three seconds to complete the request. And then after it has slept for that number of seconds, it just returns some text. So we're not actually dealing with data for an author and some comments, but I think it sets the stage well for what's happening. What do you think then, if I run this code just as it is, how long is it going to take for my page to render?
If I am calling useFetch once here, awaiting the result and then calling useFetch once here and awaiting that result, and each of them run in sequential order. Well, let me open up my console here. And you actually already have a little preview of what's going to happen. timeEnd in order to count how long this is going to take.
Let's refresh the page. Wait just a few seconds. And then over here, you see that it takes just over five seconds to load. Why?
Well, because one request took two seconds and the other request took three seconds. So it only makes sense that their combination would take a little over five seconds. The extra little bits, just the extra time it took to process. So this isn't the best case scenario.
If author and comments don't rely on one another's response in order to run, if they don't have to be run sequentially, and it would be better if we could run them in parallel. Can we do that? Well, sure. This is another great use case for useAsyncData, actually.
all call. Here, we will give it an array. and the promises that I want to wait to resolve are a fetch request to get our author and then another fetch request to get our comments. Awesome.
So now let's await for use async data to complete and then we will extract the data from the response. Now data is going to be an array of the two responses in order. So that means the first item in the array here is going to be the response of this request. And the second item within the array will be the response from this request.
Great. Let me remove the synchronous requests right down here. And then I'll just create a couple of computed props in order to get the author and the comments from the proper slot, the proper position within the array. Let's go and give the page a refresh and see how long it takes.
One, two, three. That was faster this time, no longer five seconds. Let's check the DevTools to confirm, and yeah, this time it was only about three seconds. Running requests in parallel when possible makes your page load faster, and that's just good for everybody.
And the easiest way to achieve this in Nuxt is with useAsyncData plus Promise not all.