ajax call returning promis and resolve it by the calling function to its value

Question

By now i read somewhere around 6 pages containing documentations and stackoverflow answers but I don't get the method.

My function is by now after reading all the stuff built like this:

async function getFToken(postId){
    const response = await $.ajax({
        type: "POST",
        url: ajax_object.ajax_url,
        data:{
        action:'get_f_token', 
        postId: postId,
        },
        success:function(response) {

        }
    });
    return response;
}

and in my other function is like this:

function getFeedback(postId){
    $(".show_company").hide();
    $(".show_feedback").show();
    $.ajax({
        type: "POST",
        dataType: "text json",
        url: ajax_object.ajax_url,
        data:{
        action:'get_feedback', 
        postId: postId,
        },
        success:function(response) {
            var postTitle = '';
            for (i in response) {
                postTitle += "<h1>" + response[i].post_title + "</h1><br/><br/>" + response[i].ID ;
                var test = getFToken(387);
                alert(Promise.resolve(test));
            };
            $("#result").html(postTitle);
        }
    });
}

is there any chance, that this is a bigger issue because i call a async in another Ajax call trying to retrieve the value? I'm trying to get the string from the first ajax call and hand it to the second function in the ajax call to attach it to the posts i retrieve from WordPress

The alert is giving me [object Promise] but how do i get the value passed from the php script?

php-scrtipt:

//get fToken from specific feedbacks
add_action( 'wp_ajax_get_f_token', 'get_f_token' );
function get_f_token() {
    if(isset($_POST['postId'])){
        $postId = $_POST['postId'];
    } 
    $fToken = get_post_meta($postId, 'fToken', true);
    echo $fToken;
    wp_die();
}

Yes `getFToken` is an `async function` and calling it returns a promise. You need to wait for it like for any other promise. — Bergi, May 18 '18 at 13:15
@Bergi 1: can i just delete the success callback? 2: how do i wait for it? 3: that is just for testing reasons, afterwards this will be switched with the actual post id from the post handled by the loop — J. Doe, May 18 '18 at 13:17
Oh, you're talking about the empty `success` callback in the first snippet. Yeah, you can (should) just remove that. But you should also fix the code in the second snippet to use the ajax promise. — Bergi, May 18 '18 at 13:23
So do i replace the whole success of the second snipped with await and then post into it what it should do? Actually i just recognized i still don't get it :S — J. Doe, May 18 '18 at 13:28
If i change the code in the second snipped from var test = getFToken(387); to var test = await getFToken(387); it is giving me an error — J. Doe, May 18 '18 at 13:30
And if i change it like that var test = getFToken(387).then(alert(Promise.resolve(test))); i still get only the promise objects — J. Doe, May 18 '18 at 13:31
To use `await`, you will of course need to use `async function getFeedback`. Then you can do either `var test = await getFToken(…); alert(test);` or `getFToken(…).then(test => { alert(test) });`. — Bergi, May 18 '18 at 13:59
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/171338/discussion-between-j-doe-and-bergi). — J. Doe, May 18 '18 at 14:04

score 1 · Accepted Answer · answered May 18 '18 at 14:11

1

Don't use success callbacks when you can use async/await:

async function getFToken(postId) {
    return $.ajax({
        type: "POST",
        url: ajax_object.ajax_url,
        data: {
            action: 'get_f_token', 
            postId: postId,
        }
    });
}

async function getFeedback(postId) {
    $(".show_company").hide();
    $(".show_feedback").show();
    const response = await $.ajax({
//                   ^^^^^
        type: "POST",
        dataType: "text json",
        url: ajax_object.ajax_url,
        data: {
            action: 'get_feedback', 
            postId: postId,
        }
    });
    let postTitle = '';
    for (const i in response) {
        postTitle += "<h1>" + response[i].post_title + "</h1><br/><br/>" + response[i].ID ;
        const test = await getFToken(387);
//                   ^^^^^
        alert(test); // no Promise.resolve, you don't want to alert a promise
    }
    $("#result").html(postTitle);
}

answered May 18 '18 at 14:11

Bergi

630,263
148
957
1,375

Any chance of geting multiple variables of different posts? in the example of my question i replaced the function passing variable with a fixed number (387) but now i would like to use response[i].ID for this if i just replace it it only gives me one variable and the second is empty. guess that has to do with the await function? – J. Doe May 18 '18 at 15:50
1

No, passing `response[i].ID` should work just fine. Are you sure that the PHP api works? Btw, if `response` is an array, [Don't use a `for…in` enumeration](https://stackoverflow.com/q/500504/1048572)! – Bergi May 18 '18 at 16:53
1

you're right, thank you so much. it was the category in the php script which should have been category_name =) – J. Doe May 18 '18 at 20:46

ajax call returning promis and resolve it by the calling function to its value

1 Answers1