Returning Result from Function in Asynchronous Ajax Request `then` Call

Question

Still pretty new to these new methods.

Declaring an async ajax request as followed:

async function doAjax(email) {
    let result;

    try {
        result = await jQuery.ajax({
            url: ajaxurl,
            type: 'POST',
            data: {"action": "custome_ajax_email_check", "guestemail": email }
        });

        return result;
    } catch (error) {
        console.error(error);
    }
}

This is being called within another function dubbed validate()

function validate() {
    var email = jQuery("#billingemail").val();

    if (isValidEmailAddress(email)) {
        doAjax(email).then( (data) => ajaxCallResult(data) )
    }

  . . . . .

Debugging till now, it does as you expect... into validate(), onto doAjax() and here's the last function called (minified):

function ajaxCallResult(data){

    data = jQuery.parseJSON(data);
    if(!data.result) {
        return true;
    }
    else {
        return false;
    }

}

But now I need the return (boolean in this case) from ajaxCallResult()... as a true or false indicates whether a users email exists or not.

But as its chained, I am not sure how to declare it a variable to return the result from.

Kunal Mukherjee · Answer 1 · 2020-07-17T18:13:56.473

1

Refactor your code after ajaxCall function so that it runs sequentially, you can do so by passing a callback to validate function and writing code when the promise resolves.

async function doAjax(email) {
    let result;
    try {
        result = await jQuery.ajax({
            url: ajaxurl,
            type: 'POST',
            data: {"action": "custome_ajax_email_check", "guestemail": email }
        });

        return result;
    } catch (error) {
        console.error(error);
    }
}

function ajaxCallResult(data){
    data = jQuery.parseJSON(data);
    if(!data.result) {
        return true;
    }
    else {
        return false;
    }
}

function validate(successCb) {
    var email = jQuery("#billingemail").val();

    if (isValidEmailAddress(email)) {
        return doAjax(email)
        .then((data) => {
            return successCb(ajaxCallResult(data));
        });
    }
}

// Calling validate function
validate(function(data) {
    // Response from ajaxCallResult function
    console.log(data);
});

edited Jul 17 '20 at 18:13

answered Jul 17 '20 at 18:03

Kunal Mukherjee

5,775
3
25
53

Much cleaner, debugged line by line and I can see it is doing as intended. One problem though, it is failing at `successCb` after `successCb(ajaxCallResult(data))` it stops giving error `successCb is not a function`... – bbruman Jul 17 '20 at 18:11
@bbruman try now – Kunal Mukherjee Jul 17 '20 at 18:14
It is more proper syntax now more but same error.... `Uncaught (in promise) TypeError: successCb is not a function` ... sorry I am not sure what you are trying to do.. what is `successCb`, looks just like a return value from `validate()`, why are you trying to call it as a function on the last step? – bbruman Jul 17 '20 at 18:21
The thing is you cant return values directly from asynchronous functions, so you have to synchronize your code to run after your promise resolves or callback has some value. Here `successCb` is a function which will execute after `doAjax` resolves – Kunal Mukherjee Jul 17 '20 at 18:24
Yes I understand more after going through your code and seeing what it does. I do not see `successCb` being declared as a function anywhere though, unless I am seeing things wrong? – bbruman Jul 17 '20 at 18:28
@bbruman `successCb` name can be anything you want, Its an anonymous function passed from here `function(data) {` – Kunal Mukherjee Jul 17 '20 at 18:30
Okay, thanks for clarification. Thought that might be it but I've never seen it like that I don't believe. It does make sense but is still failing in this instance as I said (`Uncaught (in promise) TypeError: successCb is not a function`). @Barmar's thread is a wealth of information I need to do some reading on that. Def have a better grasp of async/sync now, and I actually got this working by taking it out of function and don't it procedural more or less.. but yeah, thanks for the help and info – bbruman Jul 17 '20 at 18:34

Returning Result from Function in Asynchronous Ajax Request `then` Call

1 Answers1