How to get value from async method (ajax)

Question

I am not used to asynchronous method so I would like to have your help. I have this ajax method that gets the data of my mysql tables. I need to retrieve this data to use it in my code.

Here is my code :

function ajaxRequest(type,url,callback,data=""){
    let request = new XMLHttpRequest();
    request.open(type, url);

    request.onload = function () {
        switch (request.status){
            case 200:
            case 201: //console.log(request.responseText);
                    callback(request.responseText);
            break;
            default: console.log(request.status);
        }
    };
    request.send(data);
}

function setAvailableQuestions(){
    ajaxRequest("GET","../controller.php?func=get_availableQuestion", (questions) => {
        var allQuestions = JSON.parse(questions);
        return allQuestions;
    });
}

function getNewQuestion(){
    var availableQuestions = setAvailableQuestions();
    console.log(availableQuestions); //undefined

}

I read that you could solve it in two different ways, first one is to put ajax request asynchronous to false :

function setAvailableQuestions(){
    var ajax = new XMLHttpRequest();
    var asynchronous = false;
    ajax.open("GET","../controller.php?func=get_availableQuestion", asynchronous);
    ajax.send();
    ajax.onreadystatechange = function(){
        var allQuestions = JSON.parse(this.response);
        return allQuestions;
    }
}
    
 function getNewQuestion(){
        var availableQuestions = setAvailableQuestions();
        console.log(availableQuestions); //undefined
}

But it still displays undefined And the other method is to use .then or await for asynchronous methods but I don't know how to apply it to my first code.

Does anyone has an idea to help me ?

https://stackoverflow.com/questions/14220321/how-to-return-the-response-from-an-asynchronous-call — epascarello, Jun 03 '22 at 13:51

score -1 · Answer 1 · edited Jun 03 '22 at 14:01

-1

Try setting the "return" on setAvailableQuestions().

function setAvailableQuestions(){
    var ajax = new XMLHttpRequest();
    var asynchronous = false;
    ajax.open("GET","../controller.php?func=get_availableQuestion", asynchronous);
    ajax.send();
    ajax.onreadystatechange = function(){
        var allQuestions = JSON.parse(this.response);
        return allQuestions;
    }
    return ajax.onreadystatechange;
}

edited Jun 03 '22 at 14:01

Dave Newton

158,873
26
254
302

answered Jun 03 '22 at 13:55

Rodrigo R. Coelho

168
2
13

1

The code as shown returns the state change handler function, which isn't likely to be what the OP wants. It'd also be worth mentioning that the *real* change here is turning off async, which isn't the best approach. – Dave Newton Jun 03 '22 at 14:03

How to get value from async method (ajax)

1 Answers1