javascript - programacion - promesas typescript

Convierta XMLhttpRequest en una función que falla: asincronía u otra?

Question

Intento convertir XMLHttpRequest en una función como

var getImageBase64 = function (url) { // code function
    var xhr = new XMLHttpRequest(url); 
    ... // code to load file 
    ... // code to convert data to base64
    return wanted_result; // return result of conversion
}
var newData = getImageBase64(''http://fiddle.jshell.net/img/logo.png''); // function call
doSomethingWithData($("#hook"), newData); // reinjecting newData in wanted place.

Tengo éxito al cargar el archivo y convertirlo a base64. Sin embargo, soy incapaz de obtener el resultado como resultado :

var getImageBase64 = function (url) {
    // 1. Loading file from url:
    var xhr = new XMLHttpRequest(url);
    xhr.open(''GET'', url, true); // url is the url of a PNG image.
    xhr.responseType = ''arraybuffer'';
    xhr.onload = function(e) { 
        if (this.status == 200) { // 2. When loaded, do:
            console.log("1:Response?> " + this.response); // print-check xhr response 
            var imgBase64 = converterEngine(this.response); // converter
        }
    }
    xhr.send();
    return xhr.onload(); // <fails> to get imgBase64 value as the function''s result.
}

console.log("4>>> " + getImageBase64(''http://fiddle.jshell.net/img/logo.png'') ) // THIS SHOULD PRINT THE BASE64 CODE (returned resukt of the function  getImageBase64)

Ver Fiddle aquí .

¿Cómo hacer que funcione para que devuelva los nuevos datos como salida?

Solución: mi implementación final es visible aquí , y en JS: ¿cómo cargar una imagen de mapa de bits y obtener su código base64? .

Answer 1

Cuando utiliza xhr.onload, realmente define una función para que JS llame cuando se carga, por lo tanto, el valor de xhr.onload es la función, no la salida de la función. Devolver xhr.onload () llamará a esa función y devolverá la salida, pero su función de carga no tiene declaración de retorno y, por lo tanto, no tiene salida. Además, está llamando a xhr.onload sincrónicamente mientras configura el objeto y, por lo tanto, no tendrá que procesar ningún dato.

Le sugiero que agregue un parámetro de devolución de llamada a su función como tal, esto se ejecutará cuando los datos se hayan cargado.

function getImageBase64( url, callback) {
    // 1. Loading file from url:
    var xhr = new XMLHttpRequest(url);
    xhr.open(''GET'', url, true); // url is the url of a PNG image.
    xhr.responseType = ''arraybuffer'';
    xhr.callback = callback;
    xhr.onload = function(e) { 
        if (this.status == 200) { // 2. When loaded, do:
            console.log("1:Response?> " + this.response); // print-check xhr response 
            var imgBase64 = converterEngine(this.response); // converter
            this.callback(imgBase64);//execute callback function with data
        }
    }
    xhr.send();
}

Entonces lo usarías así

var myCallBack = function(data){
    alert(data);
};
getImageBase64(''http://fiddle.jshell.net/img/logo.png'', myCallBack);

Answer 2

Las llamadas asincrónicas en JavaScript (como xhr) no pueden devolver valores como las funciones normales. El patrón común utilizado al escribir funciones asíncronas es este:

function asyncFunc(param1, param2, callback) {
  var result = doSomething();
  callback(result);
}

asyncFunc(''foo'', ''bar'', function(result) {
  // result is what you want
});

Por lo tanto, su ejemplo traducido se ve así:

var getImageBase64 = function (url, callback) {
    var xhr = new XMLHttpRequest(url); 
    ... // code to load file 
    ... // code to convert data to base64
    callback(wanted_result);
}
getImageBase64(''http://fiddle.jshell.net/img/logo.png'', function(newData) {
  doSomethingWithData($("#hook"), newData);
});