jQuery Ajax async function don't fired on success

Question

I have code like this:

jQuery("#test_btn").off("click").on("click", function () {
        jQuery.ajax({
                        type: "POST",
                        url: "/api/test/",
                        data: {
                            test: "me"
                        },
                        success: async function (response) {
                            alert("foo");
                        },
                        error: function (e) {
                            console.error(e);

                        }
                    });
        });

why the success function won't print an allert with "foo"? I nedd to use a promise function inside success... but nothing !

Answer 1

I think your problem is that you are using an old JQuery version.

In 3.2.1 if you use an async function as feedback doesn't work

// find elements
var banner = $("#banner-message")
var button = $("button")

// handle click and add class
button.on("click", function() {
  banner.addClass("alt");
  jQuery.ajax({
    type: "POST",
    url: "/api/test/",
    data: {
      test: "me"
    },
    success: async function(response) {
      alert("Success!");
    },
    error: async function(e) {
      alert('O no, an error! :(');
      console.error(e);

    }
  });
})

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#banner-message {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

#banner-message.alt {
  background: #0084ff;
  color: #fff;
  margin-top: 40px;
  width: 200px;
}

#banner-message.alt button {
  background: #fff;
  color: #000;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<div id="banner-message">
  <button>Send XHR request</button>
</div>

In 3.3.1 and above work perfectly

// find elements
var banner = $("#banner-message")
var button = $("button")

// handle click and add class
button.on("click", function() {
  banner.addClass("alt");
  jQuery.ajax({
    type: "POST",
    url: "/api/test/",
    data: {
      test: "me"
    },
    success: async function(response) {
      alert("Success!");
    },
    error: async function(e) {
      alert('O no, an error! :(');
      console.error(e);

    }
  });
})

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#banner-message {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

#banner-message.alt {
  background: #0084ff;
  color: #fff;
  margin-top: 40px;
  width: 200px;
}

#banner-message.alt button {
  background: #fff;
  color: #000;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="banner-message">
  <button>Send XHR request</button>
</div>

Answer 2

jQuery don't support async on callback need to use fetch api like this

await fetch("/api/test/", {
                        method: "post",
                        body:
                            'nonce=' + encodeURIComponent("<?= generate_nonce(); ?>") +
                            "&user_id=" + encodeURIComponent("<?= $_SESSION['user_id']; ?>") +
                            "&supername=" + encodeURIComponent("<?= $_REQUEST['bot_name']; ?>") +
                            "&name=" + encodeURIComponent(valore_base) +
                            "&simple=" + encodeURIComponent("check"),
                        headers:
                            {
                                "Content-Type": "application/x-www-form-urlencoded"
                            }

                    })
                        .then(async function (response) {
//success here 
});

another solution thanks to @Kalimah Apps is declare an async function inside success callback.... the basis is that the jQuery callback can't be async

jQuery("#test_btn").off("click").on("click", function () {
jQuery.ajax({
                type: "POST",
                url: "/api/test/",
                data: {
                    test: "me"
                },
                success: function (response) {

                    async function abc(response){
                        await my_sync_func(response);
                        alert("done after async")
                    }
                    abc(response);
                },
                error: function (e) {
                    console.error(e);

                }
});

});