Uncaught SyntaxError: await is only valid in async function (its in an async function though…)

Question

So I have no clue what's causing this issue and I've spent at least 30 minutes searching google and trying different things with no solution. I've defined an async function and I'm trying to use await inside of it but its giving me the

Error: Uncaught SyntaxError: await is only valid in async function

Here is the code:

function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}
async function SolveRecaptchaV2(APIKey, googleKey, pageUrl, proxy, proxyType){
            var requestUrl = "https://2captcha.com/in.php?key=" + APIKey + "&method=userrecaptcha&googlekey=" + googleKey + "&pageurl=" + pageUrl + "&proxy=" + proxy + "&proxytype=";

            switch (proxyType) {
                case 'HTTP':
                requestUrl = requestUrl + "HTTP";
                break;

                case 'HTTPS':
                requestUrl = requestUrl + "HTTPS";
                break;

                case 'SOCKS4':
                requestUrl = requestUrl + "SOCKS4";
                break;

                case 'SOCKS5':
                requestUrl = requestUrl + "SOCKS5";
                break;
            }   
            $.ajax({url: requestUrl, success: function(result){
                if(result.length < 3){
                    return false;
                }else{
                    if(result.substring(0, 3) == "OK|"){
                        var captchaID = result.substring(3);

                        for(var i=0; i<24; i++){
                            var ansUrl = "https://2captcha.com/res.php?key=" + APIKey + "&action=get&id=" + captchaID;  

                            $.ajax({url: ansUrl, success: function(ansresult){
                                    console.log(ansresult);
                                    if(ansresult.length < 3){
                                        return ansresult;
                                    }else{
                                        if(ansresult.substring(0, 3) == "OK|"){
                                            return ansresult;
                                        }else if (ansresult != "CAPCHA_NOT_READY"){
                                            return ansresult;
                                        }
                                    }
                                }
                            });
                            await sleep(1000);
                        }

                    }else{
                        return ansresult;   
                    }
                }
            },
            fail: function(){
                return "";
                }
            });

        }

EDIT:: Now, when i make the $.ajax callback function an async function, neither of the $.ajax calls work, and any console.log's i make inside of them dont show in the console... i dont get any errors though

Answer 1

So the main issue here is, you're using await within the success function from $.ajax function (This is not possible, without making this function async as well, but now because your code is mixing callbacks/async, you're not able to resolve the original Promise of SolveRecaptchaV2 . You're mixing async with old callbacks.) Your code is essentially doing:

SolveRecaptchaV2 => Ajax Request => Ajax Request Done, Firing callback
                         V                         V
                     Returning         Returning (But nothing cares about this return)

If you're using async functions, try to utilize async as much as possible. $.ajax will return a promise, so we can await that, and keep our function completely async:

function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

async function SolveRecaptchaV2(APIKey, googleKey, pageUrl, proxy, proxyType){
    var requestUrl = "https://2captcha.com/in.php?key=" + APIKey + "&method=userrecaptcha&googlekey=" + googleKey + "&pageurl=" + pageUrl + "&proxy=" + proxy + "&proxytype=";

    switch (proxyType) {
        case 'HTTP':
        requestUrl = requestUrl + "HTTP";
        break;

        case 'HTTPS':
        requestUrl = requestUrl + "HTTPS";
        break;

        case 'SOCKS4':
        requestUrl = requestUrl + "SOCKS4";
        break;

        case 'SOCKS5':
        requestUrl = requestUrl + "SOCKS5";
        break;
    }   
    try {
        await result = await $.ajax({url: requestUrl});

        if(result.length < 3) {
            return false;
        } else {
            if(result.substring(0, 3) == "OK|") {
                var captchaID = result.substring(3);

                for(var i=0; i<24; i++){
                    var ansUrl = "https://2captcha.com/res.php?key=" + APIKey + "&action=get&id=" + captchaID;  

                    var ansResult = await $.ajax({url: ansUrl});
                    console.log(ansResult);
                    if(ansResult.length < 3) {
                        return ansResult;
                    } else {
                        if(ansresult.substring(0, 3) == "OK|") {
                            return ansResult;
                        } else if (ansResult != "CAPCHA_NOT_READY") {
                            return ansResult;
                        }
                    }
                    await sleep(1000);
                }
            } else {
                // ansResult is not defined here, not sure what you want to return here (May want to return false, or an empty string):
                return ansResult;   
            }
        }
    } catch (err) {
        //On ajax failure, return empy string. (May want to return false here, to fall inline with your "if (result.length < 3)" statement above.)
        return "";
    }
}

Now our chain looks like this:

SolveRecaptchaV2 => Ajax Request
                     => Ajax Request Done
                       => Get Answer URL
                         => Sleep
                           => Get Answer URL
                             => Sleep (...loop)
                               => Resolve promise of SolveRecaptchaV2.