Estoy devolviendo un objeto dentro de mi controlador de éxito AJAX, que need antes de que mi código se ejecute más. Sin embargo, cuando se usa AJAX, no espera a que el bloque de éxito termine de ejecutarse y, por lo tanto, imprime el valor de la variable myLayer como undefined , ya que la línea console.log(mylayer) se ejecuta antes de que el controlador de éxito devuelva un valor. ¿Cómo puedo esperar a que el controlador de éxito devuelva el objeto userLayer para que el valor myLayer no esté undefined ?
PD: no hay necesidad de preocuparse por el tipo de datos y la definición de las variables myLayer y userLayer , ya que son correctos en mi código y se cuidan. No lo incluí aquí para mantener la pregunta simple y directa. He estado atascado en este problema durante mucho tiempo. Cualquier ayuda será muy apreciada :)
Llamando a la función AJAX
myLayer = this.addUserLayerTreemail(userLayer); // This always prints "undefined" as it gets executed before the AJAX // success handler returns the value console.log(myLayer)Definición de la función AJAX
addUserLayerTreemail(userLayer) { let configData = {"searchText": "search", "searchType" : "treemail"}; $.ajax({ url: "../apis/mySearch", method: 'GET', dataType: 'json', data : configData, success: response => { userLayer.query().where(response).run((data) => { userLayer.add(data); }); // I need this object to be stored in the myLayer variable (when calling the // function above) after the success handler of AJAX function is executed. // Currently, it only returns this variable after console.log(myLayer) above // which yields in the myLayer variable to print "undefined". console.log(userLayer); return userLayer; } }); }Puede hacer que el código asincrónico parezca código de sincronización usando "async" y "await". Use la palabra clave "esperar" cuando necesite el valor devuelto de la función asíncrona.
Si la función usa "esperar", debe tener la palabra clave "async" antes de la definición de la función
async addUserLayerTreemail(userLayer) { let configData = {"searchText": "search", "searchType" : "treemail"}; var response = await $.ajax({ url: "../apis/mySearch", method: 'GET', dataType: 'json', data : configData, }); userLayer.query().where(response).run((data) => { userLayer.add(data); }); console.log(userLayer); return userLayer; }No olvide agregar "async" en el script principal
async function main(userLayer){ myLayer = await this.addUserLayerTreemail(userLayer); console.log(myLayer) }Puede prometer una llamada ajax envolviéndola en Promise . p.ej
async function addUserLayerTreemail(userLayer) { let configData = { searchText: "search", searchType: "treemail" }; return new Promise((resolve, reject) => { $.ajax({ url: "../apis/mySearch", method: "GET", dataType: "json", data: configData, success: (response) => { userLayer .query() .where(response) .run((data) => { userLayer.add(data); }); resolve(userLayer); }, error: (error) => { reject(error); }, }); }); }Y luego puede consumir datos usando el código a continuación:
async function print() { try { myLayer = await this.addUserLayerTreemail(userLayer); console.log(myLayer) } catch (error) { console.log(error) } } print()