I'm trying to get multiple responses from the server. For that I need all the requests to be sended (I don't mind the order) and to get all the responses before returning them. This is my code:

async function getResponse(URL){
    var xhttp;
    xhttp=new XMLHttpRequest();
    xhttp.responseType = "json"
    xhttp.open("GET", URL, true);
    xhttp.send();
    xhttp.onreadystatechange = async function() {
    if (this.readyState == 4 && this.status == 200) {
        response = await this.response
        console.log("response")
        console.log(response)
        return response
    }
    };
}

async function getFilteredDiagram(){
    let requests = ['/?s=1&a=2','/?s=3']
    var responses = await Promise.all(requests.map(async (r) => {return await getResponse(r)}))
    console.log("all_responses")
    console.log(responses)
}

The thing is that I'm doing console.logs to see whats happening and I get:

all_responses: 
[undefined,undefined]
response:
[resp1]
response:
[resp1,resp2]

That is to say, it is applying the mapping over the list, before getting a response from getResponse. I need them to be in the other way.

Can someone help me?