We've made it this far in the series and now we're getting to the deep stuff. And I can't think of any deeper Livewire four feature than interceptors. This is a feature that we use internally to build most of live wire's JavaScript features, but we're exposing it to you so that you can use it in your own apps. It's a sharp knife, but there's a lot of ways you can use it that are just useful.

It's a sharp knife, but there's a lot of ways you can use it that are just useful. Or you can blow it out of the water and you can build an entire live wire plugin that does really, really crazy things. But we're just gonna start simple and show you how you can use interceptors to accomplish again, simple things. So here's the edit post component We have. We have this delete button with that wire confirm

So here's the edit post component We have. We have this delete button with that wire confirm or the JavaScript confirm. Let's take a look at that. We scroll down, we have this delete thing. We say Js, delete post, and then Js delete post. Let's get rid of all that. And instead of calling that js, we're just gonna call delete directly again. And for this demo, I don't want

we're just gonna call delete directly again. And for this demo, I don't want to keep deleting the post over and over again. So I'm gonna comment that out. I'm gonna put sleep one just so that it's slow so we can see some stuff with the interceptors. Okay, so now we're calling wire, click delete. Now let me introduce you to interceptors this intercept, delete, whoops, delete. And then a callback. Do something like console log.

delete, whoops, delete. And then a callback. Do something like console log. Can't type today, deleting. Okay, now check this out. I hit delete and it says deleting. So that's what an interceptor is. It intercepts a request that goes to the server. These are actually actions. This is a concept that is kind of outside the scope of this little video,

This is a concept that is kind of outside the scope of this little video, but these are intercepting actions we call, you might think of them as methods on your live wire component. Like I have a delete method. We think of them as actions because sometimes they're not methods like think about if you had refresh here, there's no dollar sign refresh method on your component. So we call them actions.

there's no dollar sign refresh method on your component. So we call them actions. And actions have a name like delete. They also have parameters if you were to pass something in like one or two or whatever. Those are actions. Actions get bundled into messages because sometimes you can have multiple actions fire at the same time for a component. So for each component, there's a message that can have multiple actions.

So for each component, there's a message that can have multiple actions. Well, you can also have multiple components bundled up into the same request to the server. So messages can be inside requests. So a request, that's the thing that actually goes to the server, can have multiple messages. And those messages can have multiple actions. That's the Russian doll happening under the hood. Every time anything is sent to the server in Livewire,

That's the Russian doll happening under the hood. Every time anything is sent to the server in Livewire, you don't have to know that or be aware of it, but you should know if you want to get deeper into interceptors. You can also intercept messages. You can also intercept entire requests and do bigger things with the entire request itself. But again, outside of the scope for this video, we're just gonna intercept the action.

But again, outside of the scope for this video, we're just gonna intercept the action. And in this case, we console logging, deleting. Well, there's a bunch of things that you get inside of this. Callback lifecycle, hooks and useful properties or objects like action. So this action object, let's just log this out and I, I wanna show you what's on it. This is again what we use internally to know stuff about an action.

This is again what we use internally to know stuff about an action. I hit delete. And now we have this action object. And inside of it, there's a lot of internal things that you'll never touch, but there's useful things you might like. The name is delete. We know that the parameters a JavaScript object or array of parameters. This is probably useful to you in some way.

or array of parameters. This is probably useful to you in some way. And the really useful one is origin. So sometimes an action is fired not from the actual page, like a user didn't click something. Maybe in your JavaScript you just typed this dot delete and called that method directly. In this case, origin would be empty, there would be no origin, it's just kind of ephemeral. But if it's triggered from something on the page, we track

there would be no origin, it's just kind of ephemeral. But if it's triggered from something on the page, we track that origin and we give information to you like the actual element it was triggered from. If you're seeing this, if you're like me, you're tickled, you're like, whoa. So I can just intercept any action on the page and I can know the element it was originated on and do stuff to that element. Like make it transparent or something.

and do stuff to that element. Like make it transparent or something. Yeah, you could do stuff and directive is even deeper. Again, like you might not use this, but we do like we know exactly what directive triggered that. It was a wire click. We know the modifiers on it. If you had dot prevent, we can see that in an array. It'll say prevent, which is just crazy powerful. Okay, so those are interceptors in a nutshell.

It'll say prevent, which is just crazy powerful. Okay, so those are interceptors in a nutshell. Let's do things with them. So the first thing I wanna do is action cancel. If I could just say, cancel this action and check that out. So it totally just doesn't, well, you can't really tell right now. But look it, there's no requests being sent to the server at all. So this is extremely useful

to the server at all. So this is extremely useful because maybe you just want to bail outta this action entirely and then show your confirmation modal. Like we could introduce that whole feature again. Are you sure? And then if they are, sure, well then let's just call delete. Again, this would actually end us up in a loop

well then let's just call delete. Again, this would actually end us up in a loop because it would call delete, call the interceptor, call confirm again, and they would just be stuck in a loop. That's why like this is probably more useful for if you're firing. Uh, I don't know, you probably just use Js stop. But I wanted to show you because there are times where you might want to cancel an action. Okay, well there's another little affordance

where you might want to cancel an action. Okay, well there's another little affordance here called on send. So you'll notice that it canceled the action before the request was even sent. Well, what if we wrap this in on send and now we know that the action actually turned into a real request and got sent to the server and we'll cancel it right away after that. Okay, so now watch this.

and we'll cancel it right away after that. Okay, so now watch this. The request got sent but it got canceled. It physically fundamentally cancels the fetch request entirely. This is very useful. Like maybe you have a button that you want to, that does something long, like send an email or whatever, and then you have another button where you can just cancel that, that request entirely.

and then you have another button where you can just cancel that, that request entirely. Now, it is important to know that when you cancel a request to the server, the request does finish the browser just canceled it. Like it doesn't care about it anymore. But if you can't like mid-flight, if Laravel was in the process of sending an email or writing to the database, Laravel doesn't know that. Like, hey, the browser stopped caring about it,

or writing to the database, Laravel doesn't know that. Like, hey, the browser stopped caring about it, Laravel will finish it. So it's not really canceling the server side stuff, it's just canceling the actual request, but it's still useful. Okay, let's do something else. Let's say document dot body style opacity equals 0.5. So now when this request is sent,

style opacity equals 0.5. So now when this request is sent, we're gonna mute the whole page. So check this out. It's all muted, but the request came back and it didn't stop being muted. Well, because we didn't set it to, we didn't set it back to opacity one. So we can do that with on finish. Okay, so we could say on finish, and then in here when it's finished, we want to set

Okay, so we could say on finish, and then in here when it's finished, we want to set that opacity back to one. And then let's see that. So we hit delete, it turns transparent, and then it goes back to being fully opaque when it's finished. This is so darn useful. You could write all your own loading spinners that you want or whatever.

You could write all your own loading spinners that you want or whatever. And unfinished is guaranteed to be called no matter what happens. If it errors out, it's gonna be called. If there's a validation error, it's still gonna be called. You might want to say, I wanna do something only if there's a success. So you could say like on success. And now this is only gonna run if there's some sort

So you could say like on success. And now this is only gonna run if there's some sort of success, like let's do that on success. And then in here we'll say document dot, body style dot background equals green. Uh, this is so stupid, you would never do this, but let's just see it happen for fun. Hey, it was successful. And we could also say like on error then style is not green, it's red.

And we could also say like on error then style is not green, it's red. Okay? And then inside of delete, I don't know, this is silly, but we're doing it. We could throw new exception. Hey, okay. And now it's gonna error out and it didn't error out and it didn't even show our network requests because on error is not defined because we didn't import it up here on error.

because on error is not defined because we didn't import it up here on error. Let's try that again. Delete. There we go. We got an error thrown in a modal, but the background did turn red. Alright, there's so much here to cover. There's stuff I definitely didn't even touch on, but this is the simple set of things that you can use to intercept any action in your component and do whatever you want with the lifecycle of that request.

to intercept any action in your component and do whatever you want with the lifecycle of that request. One more little example that I'm just gonna tell you, I'm not gonna demonstrate for you, but I had this need once where I think it was for infinite pagination. So as a user scrolls, I'm showing it was when they scroll up, I'm showing more results above it. And so a live wire request was sent and added more results,

I'm showing more results above it. And so a live wire request was sent and added more results, but it changed the scroll of the whole page. So the user was scrolling, but then the content of the page changed. So it all just shifted and they lost their place in the scroll. So I added a little hook just like this that said, Hey, before this request goes out, I, well, it was actually before this request is even received.

before this request goes out, I, well, it was actually before this request is even received. There's hooks for that. I want you to store the current scroll position of the page and the body height. And then after it comes back and is processed, I want you to take the difference of those two things and adjust the scroll accordingly. And it made it invisible for the users. Users. So when you get deeper into the weeds with Livewire,

And it made it invisible for the users. Users. So when you get deeper into the weeds with Livewire, there are times where you really wanna know exactly when things are happening and be able to do things at those points in times. So this is action interceptors, use it and abuse it.