Vanilla JavaScipt

Like https://laracasts.com/series/javascript-essentials-for-php-developers

Also:

https://laracasts.com/series/javascript-the-first-steps

and

https://laracasts.com/series/modern-javascript-basics

and

https://laracasts.com/series/javascript-techniques-for-server-side-developers

An excellent course.

As far as Asynchronous JavaScript (Promises, async/await)

Look at the Fetch JS Docs:

https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

And look over Axios JS Docs.

Here just a test I did using axios js to add a record.

    const buttonForm = document.getElementById("submit");
    buttonForm.addEventListener("click", async (event) => {
        event.preventDefault();
        const thisForm = document.getElementById('add');
        var formData = new FormData(thisForm);
        var url = '<?php echo DIR . "dog/addjs"; ?>';

        axios({
            method: "post",
            url: url,
            data: formData,
            //headers: axios figures it out
        })
                .then(function (response) {
                    if (response.status === 200) {
                        alert(response.status);
                    }
                    console.log(response);
                })
                .catch(function (response) {
                    //handle error
                    console.log(response);
                });

    });

For a real error response:

                    .catch(error => {
                        if (error.response) {
                            isJson(error.response.data);
                            showData(error.response.data);
                        }

        function showData(data) {
            var div = document.getElementById('msg');
            document.getElementById("msg").style.display = "block";
            for (var key in data) {
                div.innerHTML += " " + data[key];
            }
        }

function showData is reusable, used to display errors in a div.

Like anything, Javascript is easy once learned.