10

Estoy intentando reutilizar ajax para que sea mas movible en mi proyecto. Lo coloque de la siguiente forma esperando una respuesta pero no.

function _ajax(params,uri,type){
    $.ajax({
        url: uri,
        type: type,
        dataType: 'json',
        data: {params},
        success: function(data){
            return data;
        }
   });
}

Lo manda llamar:

var result = _ajax(null,'http://','GET');
console.log(result);

consola:

undefined

Como puedo reutilizarlo, las respuestas vienen en JSON

DoubleM
  • 1,401
  • 3
  • 22
  • 56

4 Answers4

8

Tienes que utilizar un callback asi:

function _ajax(params,uri,type, callback){
    $.ajax({
        url: uri,
        type: type,
        dataType: 'json',
        data: {params},
        success: function(data){
            callback(data);
        }
    });
}

y para llamarla

var callback = function(data) {
    console.log(data);
};
_ajax(null,'http://','GET', callback);
alanfcm
  • 20,427
  • 11
  • 17
  • 34
  • El problema esque eso ya no es reutilizable, en el `callback` tendria que hacer if's para identificar a donde va ir cada información que regresa. si te das cuenta yo use un `var result = ... ` esperando que mi respuesta llegara ahí donde la mando llama. Se puede hacer eso? – DoubleM May 30 '18 at 19:34
  • La idea de el callback es que debe de ser unico. Cada vez que llames a la funcion `_ajax` va a usar un callback diferente dependiendo de lo que quieras hacer con la variable `data` – alanfcm May 30 '18 at 19:37
  • El `response` va inscrustada a elementos es lo que te decia, tendria que identifica en el `callback` a que elementos debe irse y es lo que no quiero. – DoubleM May 30 '18 at 19:39
  • Cada vez que llames la funcion, ya sabes cual es la uri, por lo tanto ya sabes la respuesta, entonces crearias varias funciones callback y el contenido de ellas es donde incrustas los elementos. – alanfcm May 30 '18 at 19:42
8

El "problema" tu solicitud es asincrona y como lo planteas no puedes trabajarlo. 

function _ajax(params,uri,type){
return $.ajax({
    url: uri,
    type: type,
    dataType: 'json',
    data: params,
    success: function(data){
        console.log("satisfactorio")
        return data;
    }});
}
let data = _ajax("" ,"https://swapi.co/api/people/1" ,"GET")
console.log("resultado" , data.toString())
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

En el ejemplo observaras que siempre se va a mostrar primero resultado y luego satisfactorio,esto se conoce como funcion asincrona valga la redundancia

¿Existe alguna solucion?

Si las enumero a continuacion:

  1. Callbacks: es la mas comun , pero cuando son anidadas puede darte problemas de comprension de codigo.

Puedes ver la pregunta en el sitio ¿Que es un "Callback"?

  1. Promesas: Para mi la mas valida, y soporta todos los navegadores decentes

Te dejo un enlace por si quieres saber mas sobre Promesas

function _ajax(params,uri,type){
return new Promise(function (resolve, reject){
    $.ajax({
        url: uri,
        type: type,
        dataType: 'json',
        data: {params},
        success: function(data){
            resolve(data);
        },
          error: function(XMLHttpRequest, textStatus, errorThrown) { 
        reject("Status: " + textStatus); 
    }    
        
    });
    })
}
_ajax("" ,"https://swapi.co/api/people/1" ,"GET")
 .then(function (data) {
    console.log(data);
  })
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  1. Async/Await : Es una promesa pero mas elegante implementado por EcmaScript7, y aun no es compatible en algunos navegadores

function _ajax(params,uri,type){
return new Promise(function (resolve, reject){
    $.ajax({
        url: uri,
        type: type,
        dataType: 'json',
        data: {params},
        success: function(data){
            resolve(data);
        },
          error: function(XMLHttpRequest, textStatus, errorThrown) { 
        reject("Status: " + textStatus); 
    }  
        
    });
    })
}
async function buscar(){
console.log(1)
let traeme = await _ajax("" ,"https://swapi.co/api/people/1" ,"GET")
console.log(traeme)
}
buscar()
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
JackNavaRow
  • 6,836
  • 5
  • 22
  • 49
0
function _ajax(params,uri,type){
return $.ajax({
    url: uri,
    type: type,
    dataType: 'json',
    data: params,
    success: function(data){
        return data;
    }});}

el return y params solo manda un object :)

ANDERSON GUERRERO
  • 1
  • 1
0

La función ajax de JQuery realiza la petición de manera asíncrona: algo así como en segundo plano.

En versiones anteriores el JQuery permitía hacer una petición sincronica lo que permitía que crees una función que retorne los datos devueltos por la petición indicando la propiedad async:false, pero por la experiencia de usuario se quedó obsoleta esa funcionalidad.

Lo puedes intentar con una versión anterior del jQuery que soporte dicha funcionalidad, pero no es recomendable.

function _ajax(params,uri,type){
    $.ajax({
        url: uri,
        type: type,
        async: false,
        dataType: 'json',
        data: {params},
        success: function(data){
            return data;
        }
   });
}

Lo que se hace por ahora para reutilizar es lo que te respondio @alanfcm la utilización de callback.

Blasito
  • 1,378
  • 1
  • 11
  • 30
  • blasito te comento que ya el async ya esta deprecado http://api.jquery.com/jQuery.ajax/ , antes los navegadores habilitaban esa opcion; ahora siempe van a ser asincrona las peticiones, solo funciona para Internet Explorer – JackNavaRow May 30 '18 at 21:39
  • JackNavaRow. Creo que eso mismo comenté en la respuesta. Sólo era a modo de explicarle como funciona la petición y que antes se podía usar el async y que ahora debe usar otro método para reutilizar su petición. – Blasito May 31 '18 at 11:12