Now, as of Laravel Mix 1.7, we have support for the async and await keywords out-of-the-box. You don't have to configure anything, you don't have to pull in any Babel plugins, everything will just work. Let me show you. Let's imagine we have some kind of generic getPost function, and that will return firstPost and secondPost. Okay, so let's just trigger that, and then log that to the console. Okay, let's boot up our watcher, and then switch over to my browser and open up the console. Sure enough, we see the array of posts, so nothing special there at all.

console. Sure enough, we see the array of posts, so nothing special there at all. However, what if we add this special async keyword before the function? Well now, if we come back and give that a refresh, you'll see that, nope, it doesn't return the array of posts anymore, it actually returns a promise that will resolve those posts. So what can we decipher from this? Well, when we add the async keyword, it's going to return a promise, regardless of what you return here, foobar. It doesn't matter.

you return here, foobar. It doesn't matter. When you have that async keyword, it's going to wrap your return value within a promise. So once again, if we give this a refresh, there we go. We once again have a promise, which means you could say something like getPosts, and then we can use this syntax, and then log it to the console. Alright, come back, give it a refresh, and we get foobar, or of course, our array of posts. Now again, traditionally, this functionality is not just going to work out of the box at the time of this recording.

Now again, traditionally, this functionality is not just going to work out of the box at the time of this recording. Usually you'd have to pull in some Babel plugins and do some research to figure out how to make everything play nicely together. But in Mix 1.7, you don't even have to think about it, you can just play away. So in addition to async, of course, there's the companion await keyword. And think of that as our way of saying, wait for this asynchronous act to resolve, and then continue on. We could do something like this, function fire, you know, whatever it happens to be. And we could say, yes, I want to get the posts.

We could do something like this, function fire, you know, whatever it happens to be. And we could say, yes, I want to get the posts. But in real life, you're not returning an array. You're maybe performing an AJAX request. You're performing a call that actually takes a bit of time to complete, which means it's not as simple as just saying, create a variable, and then, you know, whatever, console.log, the second post. Yeah, this will not work if you're performing an AJAX request. Let me show you. We could use Axios for this, I have that installed.

Let me show you. We could use Axios for this, I have that installed. And let's make a GET request to an endpoint I have set up that literally just hardcodes the exact same thing. Okay, so let's return that. And we can see here, when I call the fire function, we will fetch the posts, and we don't need a sync there. So we know this is going to return a promise, which means I can't yet operate upon the data. So let's give it a shot. Let's first import Axios.

So let's give it a shot. Let's first import Axios. And if we switch over, sure enough, we get undefined. And that's because, just to clarify, this is returning a promise. So if we give that a refresh, we can see it there. So we'd have to do something like this, where we say, how about this, get the posts, and then, once you have the response, then we will console.log response.data, which will be the posts, and then maybe get the second item from that array. So if we give that a refresh, now we fetch that. So what you find is you end up having to do things like this all of the time.

So if we give that a refresh, now we fetch that. So what you find is you end up having to do things like this all of the time. And it ends up creating a very nested and dented code that's kind of confusing and clunky to read. So we can use the await keyword to say, wait for this promise to resolve. And in fact, it means pause the execution until this promise has resolved. So imagine if we could change this to something like this. Let posts equals await getPosts. So we're going to wait for the promise here to fully resolve, or in other words, for the AJAX request to complete.

So we're going to wait for the Promise here to fully resolve, or in other words, for the AJAX request to complete. And then, I will console.log that second post. Or actually, you know what, in this case, Axios is going to return a response, so you'd get this, and then we'd have to say response, then give me the underlying data, and then get the second item. But yeah, exact same thing. So now, if we give this a refresh, hmm, await is a reserved word. OK, so what's going on here? Well, as it turns out, if you're going to use await, it has to be contained within a

It needs to be contained within a function with the async keyword. OK, so if we give that a refresh, now we see the exact same thing as we had before. But yeah, surely we can agree this is a much more sane approach, at least in terms of readability. Oh, and by the way, the compiler would have informed us of this. So if I didn't have the async keyword, and we take a look at the compiler, sure enough, it's going to let you know, all right, something's going on here, because you referenced the reserved word, but it wasn't an async function. So if we add that on, then it will compile. So what we can see here is that this combo of async and await, think of it almost like syntactic sugar to make the process of working with promises, at least on the surface, feel

And by the way, if you want, you could even say let data, and then reference it like so. So if we switch to Safari, yeah, we'll still get the same thing. Or data isn't very readable. Maybe we want to call that posts. This is all ES2015 type stuff, destructuring. So destructure data, but I want to reference it as posts. So if we come back, give that a refresh, yeah, we still get the same thing. Anyways, that's an aside. The key thing to understand is that in Laravel Mix 1.7 and higher, you get this async await combo out of the box for free.