Use closure as return of a function

Question

I need to use a variable of a closure as a return to the function to which this closure is nestled. How can I do this?

response must be the return of ajaxRequest():

function ajaxRequest(type, url) {
  const ajax = new XMLHttpRequest()

  ajax.onreadystatechange = () => {
    if(ajax.readyState === 4 && ajax.status === 200) {
      let response = parseToJson(ajax.responseText) // → JSON.parse(str)
      // ...
    }
  }

  ajax.open(type, url)
  ajax.send()

  // return response
}

ajaxRequest is called from two functions containing the request data: tradesRequest() and pricesRequest(). I need the return of these two functions to call a third function, which will have as parameters the responses of the requests of the two functions cited above.

function tradesRequest() {
  ajaxRequest(args) // args = type, url
}

function pricesRequest() {
  ajaxRequest(args)
}

function display(trades, prices) {
  // Esta função utilizará as respostas das funções acima.
}

Answer 1

ajaxRequest cannot give synchronous feedback because ajax is asynchronous. That is a scenario like:

function ajaxRequest(type, url) {
   // etc...
   return dados; // onde dados é o valor que veio do servidor
}
var resposta = ajaxRequest('algo', 'algo');

not feasible. You have to use asynchronous logic.

To do that asynchronously you have 3 chances: callback, promises or funções assíncronas.

I leave an example, you can read much more about the possibilities in the links I indicated above.

Example:

function ajaxRequest(type, url, done) {
    const ajax = new XMLHttpRequest()

    ajax.onreadystatechange = () => {
        if (ajax.readyState === 4 && ajax.status === 200) {
            let response = parseToJson(ajax.responseText) // → JSON.parse(str)
            done(null, response);
        } else {
            done('Houve um erro!...');
        }
    }
    ajax.open(type, url)
    ajax.send()
}

ajaxRequest('clientes', '/admin.php', function(erro, resposta){
    if (erro) return console.log(erro);
    // quando esta callback correr, já vais ter a resposta disponivel
    alert(JSON.stringify(resposta, '\n', 4));
});

---

Edit

(to contemplate the edition in the question with 3 functions)

In this case I suggest you use Promise. You can do something like this:

function ajaxRequest(type, url, done) {
    return new Promise(function(res, rej) {
        const ajax = new XMLHttpRequest()
        ajax.onreadystatechange = () => {
            if (ajax.readyState === 4 && ajax.status === 200) {
                let response = parseToJson(ajax.responseText) // → JSON.parse(str)
                res(response);
            } else {
                rej('Houve um erro!...');
            }
        }
        ajax.open(type, url)
        ajax.send()
    });
}

function tradesRequest() {
    return ajaxRequest('foo', 'bar');
}

function pricesRequest() {
    return ajaxRequest('alfa', 'beta');
}

function display(trades, prices) {
    // Esta função utilizará as respostas das funções acima.
}

Promise.all([tradesRequest, pricesRequest]).then(function(resultados) {
    // resultados é uma array
    var resultado1 = resultados[0];
    var resultado2 = resultados[1];
    display(resultado1, resultado2);
    
    // ou ainda melhor:
    display.apply(this, resultados);
}).fail(function(e) {
    console.log(e);
});