0

llevo un tiempo incluyendo JavaScript y PHP en páginas de Wordpress y me pregunto si podría encadenar mejor estos ficheros, sobre todo en cuanto a Ajax se refiere. Hasta ahora, mis llamadas son similares a la siguiente:

$.ajax({    
    url: 'api.php',
    type: "POST",
    dataType: "JSON",
    data: {"dato1":1, "dato2":dato2},
    timeout: 30000,
    error: function () {
        alertError();
        return false;
    },
    beforeSend: function() {
        mostrarAnimaciondeCarga(true);
    },
    success: function(response) {   
        if (!response) {
            alertError();
            return false;
        } 
        
        mostrarAnimaciondeCarga(false);
    }
});

Por otro lado, el fichero PHP devuelve generalmente true/false/array de manera:

echo json_encode($respuesta);

Me gustaría saber si hay formas mejores/más fiables/modernas de hacer esto, ya que aunque me funciona, no sé si al hacerlo así pierdo algún tipo de control de errores, tiempo de ejecución, me complico demasiado, etc...

Gracias de antemano! Un saludo.

1

1 respuesta 1

1

En cuanto a mejor / peor... no creo que eso sea algo discutible aquí, pues incumpliría las normas al estar basado en opiniones.

Lo que si te puedo contestar es que hay formas más modernas de hacerlo.

JS Nativo


Fetch

La api de fetch te permite realizar peticiones HTTP sin precisar de librerias externas, con Javascript puro. Es la más nueva en cuanto a tecnología.

En cuanto a sus puntos "flacos" estaría que requiere de conocimiento sobre las Promises, que, al ser una tecnología más o menos nueva, muchos developers se muestran reticentes a usarla aún, prefiriendo utilizar $.ajax.

Un ejemplo de uso de fetch sería

fetch('URL')
.then(response => console.log(response))
.then(data => console.log(data));

Otra opción a utilizar, aunque antigua, sería utilizar la api de XMLHttpRequest.

XMLHttpRequest

La opcion que todos conocemos y que lleva años en Javascript, para muchos se ha quedado anticuada, para otros es perfecta tal y como es.

var req = new XMLHttpRequest();
req.open('GET', 'URL', false);
req.send(null);
if (req.status == 200)
    dump(req.responseText);

Librerías externas


JQuery.Ajax

Utilizando la librería javascript por excelencia, JQuery.ajax (o $.ajax) es quizás la más utilizada por su simplicidad. Tiene puntos negativos y positivos como todas las demás, pero los más importantes a destacar:

  • Depende de una librería externa que aumenta el tamaño de tu proyecto
  • Puede ser un poco confusa en algunos casos de llamadas complejas, al crear una cantidad de código enorme.

Ejemplo:

$.ajax{
    method:"GET",
    url:"URL",
    success:()=>{},
    error:()=>{}
}

Axios

La solución creada para NodeJS, es posiblemente la más flexible al estar disponible tanto en entorno servidor como en cliente. Su uso es simplista, como el de Fetch.

axios.get(url)
.then(data=>console.log("success"))
.catch(err=>console.log("error"))

No podemos decir que haya una mejor o peor que la otra, pues no sería verdad. Todas destacan sobre las otras en un punto u otro, y flaquean en otras, al final lo importante es acostumbrarse a usar todas en función del contexto en la que las necesites.

1
  • Muchas gracias Sebastián, los probaré! Un saludo.
    – m4n50n1k0
    Commented el 27 sept. 2021 a las 9:16

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.