weird behavior from $.ajax

Question

when i run this code:

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;
        }
        console.log('here'); //this gets shown in console
        $.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;  

                        var requests = $.ajax({url: ansUrl});
                        requests.done(function(ansresult){
                            console.log(ansresult); //This gets shown in console
                            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 'not OK|';   
                }
            }
        },
        fail: function(){
            return "fail";
            }
        });

    }

When i run this code everything works fine and the code runs no problems, but when i make the callback function in $.ajax an async function, then $.ajax doesnt seem to run. Here is the code that doesnt run:

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;
        }
        console.log('here'); //This still shows in console.......
        $.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;  

                        var requests = $.ajax({url: ansUrl});
                        requests.done(async function(ansresult){
                            console.log(ansresult); //This does not show in console now.....
                            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 'not OK|';   
                }
            }
        },
        fail: function(){
            return "fail";
            }
        });

    }

Notice the console.log before the first ajax call, and the console.log in the second ajax call. The console.log in the ajax call doesnt appear...

Answer 1

Hooray, you've found a bug in jQuery. https://github.com/jquery/jquery/issues/3596

It ignores async functions passed as callbacks because it doesn't recognize them.

console.log(jQuery.isFunction(()=>{}))  // true
console.log(jQuery.isFunction(async ()=>{}))  // false

function deferred() {
  return $.ajax({url:"https://httpbin.org/ip"});  // returns a Deferred
}

async function native() {
  return $.ajax({url:"https://httpbin.org/ip"});  // returns a native promise
}

function demo() {
  deferred().then(async val=>console.log("doesn't work"));
  native().then(async val=>console.log('works'));
}
demo();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Since you're writing a Chrome extension, you can definitely use all the JavaScript that it supports.

Write await $.ajax(…) (or use fetch) and don't worry about jQuery's callbacks.

As an example:

async function demo() {
  try {
    let result = await $.ajax({url:"https://httpbin.org/headers"});
    return result.headers['User-Agent'];
  } catch (err) {
    return 'fail';
  }
}