Okay, let's take a look at suspense. Suspense is a new way to render fallback content before your component is ready to be rendered. The most common use case is fetching data from an external API. So let's take a look at how we would do this typically without suspense. So I have an app here that pulls a dad joke from an external API and just displays it here. So if we take a look at the code, I have the template here. And let's take a look at the state first. I have the dadJoke. We have the isLoading state, and we have a state for keeping track if there's an error.

I have the dad joke. We have the isLoading state, and we have a state for keeping track if there's an error. We're making an Axios call to the external API, passing in some headers. And when it resolves and it's successful, then set isLoading to false and set the dad joke. If there's an error, then isLoading is false and set the error to true. And in the template, there's a bit of nesting here. So if it's not loading, it's either successful, and if it's successful, just show the dad joke. And if it's not, there was an error.

But like I said, it is getting quite nested here. So let's take a look at how we would change this to use suspense. So to use suspense, we have to delegate the loading of the external data to an asynchronous component. So let me show you what I mean. So let's make a new component here called DadJoke. Okay, and a scaffold that out. And let me just say joke. And then we're gonna render out the DadJoke. And let me just import this component.

And then we're gonna render out the dad joke. And let me just import this component. So let's import dadJoke from dadJoke. Okay. And let's make sure to add our components key. Okay. And in our template, let's just add another section here for Suspense. And let me put that dadJoke component in here. dadJoke. Close that out.

Dad joke. Close that out. And let's see if it renders. Okay. So like I said, we have to make this dad joke component asynchronous and have it load the data in here. So let me show you what I mean. Let's make an async setup function and the dad joke. We're gonna await a fetch method on this or a fetchJoke method, fetchJoke. Again, let's make sure to always return what we want available.

We're gonna await a fetch method on this or a fetchJoke method, fetchJoke. Again, let's make sure to always return what we want available. Okay. And now we just have to do the fetching in here. So I'm going to make an async function. And I believe you can use promises as well. But async await seems cleaner in my opinion, in this case, because we don't have to do the try catch because the error is handled in the parent. You'll see what I mean in a second. So function fetchJoke.

You'll see what I mean in a second. So function fetchJoke. And we can just make the axios call in here. So I'm going to say const response equals await. And just grab it from HelloWorld. So it's just the axios call here. And we don't need the this part. So let me just paste that in. Okay. And let me just console.log the joke to make sure it's the right piece of data that we're

Okay. And let me just console.log the joke to make sure it's the right piece of data that we're getting back. So response.data.joke. Okay. We have to import Axios. Okay, let's try again. Okay, we do have some errors here. But if you scroll up, you'll see that it is console.logging the joke. So let's return that instead.

loading that's handled here in the Suspense boundary. So say Suspense, and it's built into Vue 3, so we don't have to import it. Okay, so let's close that out. Let's put it after the dad joke. And we're going to use the template syntax and the slot syntax to define the default state and the fallback state. So say template, and the default state is the component we actually want to load. So in this case, the dad joke, so I'll put that in there. And one more for the fallback state. So let's go here, paste that in, say fallback.

any errors, which in my opinion, is kind of messy. That's why I kind of prefer promises over async await in most cases. But for this case, the error happens on the parent or the error checking happens on the parent. So to do that, we still need a piece of state to hold the error. So in this case, this is for the non suspense way. So let's make another piece of state here called suspenseError. And let's make it a ref. And this time, I'll get the actual message coming from the server. So it's set to null by default.

And this time, I'll get the actual message coming from the server. So it's set to null by default. And to get that error, we just have to make use of a new hook called onErrorCaptured. So if I do this and press tab, you'll see that VSCode will import it up here. And we can just grab the error from the param. And we can do suspenseError, a piece of state we just made that value equals, let's set it to E and see what we get. And now in our template, actually, let me, again, don't forget to return this. So we have suspenseError. Okay.

So we have suspenseError. Okay. And now in our template, before the suspense, we can do a conditional. So say div v-if equals suspenseError. Then let's just render that out. I believe it's an object, but we'll see what the property is on it. suspenseError. And for this, we can just do v-else. Okay, so now, I believe my Wi-Fi is still off right now. And yeah, it works.