Explicación del problema.
La A en Ajax significa Asíncrono; esto quiere decir que la petición está fuera del flujo normal de ejecución. En tu código el $.ajax
, al ejecutarse, continúa el return, return resultado
, y esta es ejecutada antes de que la función o petición ajax pase el valor de la respuesta al success. Por ende cuando usas el alert te devuelve vacío o undefined, ya que no ha vuelto la petición que hiciste.
Posibles soluciones que le puedes dar a tu problema:
ES2017+: Promises with async/await
La versión de ECMAScript lanzada en 2017 introdujo el soporte para funciones asincronas. Con la ayuda de async and await, tu puedes escribir código asíncrono en un estilo síncrono. El código seguirá siendo asíncrono
pero es mas facíl de leer y comprender.
Async/await esta basado en promesas, una función async siempre retornará una promesa. el Await saca la información de la promesa y el resultado será el valor que fue resuelto, o de lo contrario el error en caso de que haya sido rejectada.
Acá un ejemplo, de como crear el async en un nivel alto de función:
// Using 'superagent' which will return a promise.
var superagent = require('superagent')
// This is isn't declared as `async` because it already returns a promise
function delay() {
// `delay` returns a promise
return new Promise(function(resolve, reject) {
// Only `delay` is able to resolve or reject the promise
setTimeout(function() {
resolve(42); // After 3 seconds, resolve the promise with value 42
}, 3000);
});
}
Uso de Async en funciones:
async function getAllBooks() {
try {
// GET a list of book IDs of the current user
var bookIDs = await superagent.get('/user/books');
// wait for 3 seconds (just for the sake of this example)
await delay();
// GET information about each book
return await superagent.get('/books/ids='+JSON.stringify(bookIDs));
} catch(error) {
// If any of the awaited promises was rejected, this catch block
// would catch the rejection reason
return null;
}
}
// Start an IIFE to use `await` at the top level
(async function(){
let books = await getAllBooks();
console.log(books);
})();
Current browser and node versions support async/await. You can also support older environments by transforming your code to ES5 with the help of regenerator (or tools that use regenerator, such as Babel).
Las actuales versiones de los navegadores y node suportan async / await. Tambien es soportdo por las versiones anteriores haciendo uso de ES5 bajo las herramientas tales como Babel.
Usar funciones callbacks:
Un callback es una función que será invocada más tarde cuando la petición Ajax haya finalizado.
Ejemplo:
function hacerPeticionAjax(url, callback) { // callback es solo el nombre de la variable
$.ajax(url, {
// ...
success: callback,
// ...
});
}
function alRecibirAnimales(animales) {
// animales contendrá la respuesta al ajax
}
hacerPeticionAjax('/api/animales', alRecibirAnimales);
Este ejemplo demuestra que la propiedad success
debe recibir una función, que jQuery invocará al finalizar la solicitud si tuvo éxito. Por cierto, hay otro callback disponible para controlar qué hacer en caso de errores. Se maneja utilizando la propiedad error
; recibe un callback que sera invocado en caso de no éxito.
Usar las promesas:
Las promesas son contenedores de valores futuros. Cuando una promesa recibe el valor si fue resuelta o cancelada, él notificará a los escuchas que quieren acceder a ese valor retornado. Uno de los valores agregados es que tiene mayor lectura de código y a mi parecer es un enfoque mucho mejor. Ejemplo:
function delay() {
// `delay` returns a promise
return new Promise(function(resolve, reject) {
// Only `delay` is able to resolve or reject the promise
setTimeout(function() {
resolve(42); // After 3 seconds, resolve the promise with value 42
}, 3000);
});
}
delay().then(function(v) { // `delay` returns a promise
console.log(v); // Log the value once it is resolved
}).catch(function(v) {
// Or do something else if it is rejected
// (it would not happen in this example, since `reject` is not called).
});
Usar Jquery Deferred
Esta es una implementación customizada de las promesas implementada por jQuery; el uso es muy similar al punto explicado anteriormente:
function ajax() {
return $.ajax(...);
}
ajax().done(function(result) {
// Code depending on result
}).fail(function() {
// An error occurred
});
Fuente - How do I return the response from an asynchronous call?