javascript - from - ¿Cómo capturo el error jQuery $.getJSON(o $.ajax con el tipo de datos establecido en ''jsonp'') cuando uso JSONP?

getjson jquery ejemplos

Question

¿Es posible detectar un error al usar JSONP con jQuery? He probado los métodos $ .getJSON y $ .ajax, pero ninguno de ellos detectará el error 404 que estoy probando. Esto es lo que he intentado (tenga en cuenta que todos estos funcionan con éxito, pero quiero manejar el caso cuando falla):

jQuery.ajax({
type: "GET",
url: handlerURL,
dataType: "jsonp",
success: function(results){
alert("Success!");
},
error: function(XMLHttpRequest, textStatus, errorThrown){
alert("Error");
}
});

Y también:

jQuery.getJSON(handlerURL + "&callback=?",
function(jsonResult){
alert("Success!");
});

También intenté agregar $ .ajaxError, pero tampoco funcionó:

jQuery(document).ajaxError(function(event, request, settings){
alert("Error");
});

Gracias de antemano por cualquier respuesta!

Answer 1

Detectando problemas JSONP

Si no desea descargar una dependencia, puede detectar el estado de error usted mismo. Es fácil.

Solo podrá detectar errores JSONP utilizando algún tipo de tiempo de espera. Si no hay una respuesta válida en un cierto tiempo, entonces asuma un error. El error podría ser básicamente cualquier cosa, sin embargo.

Esta es una forma sencilla de verificar errores. Solo usa una bandera de success :

var success = false;
$.getJSON(url, function(json) {
success = true;
// ... whatever else your callback needs to do ...
});
// Set a 5-second (or however long you want) timeout to check for errors
setTimeout(function() {
if (!success)
{
// Handle error accordingly
alert("Houston, we have a problem.");
}
}, 5000);

Como lo mencionó el usuario en los comentarios, también puedes usar clearTimeout:

var errorTimeout = setTimeout(function() {
if (!success)
{
// Handle error accordingly
alert("Houston, we have a problem.");
}
}, 5000);
$.getJSON(url, function(json) {
clearTimeout(errorTimeout);
// ... whatever else your callback needs to do ...
});

¿Por qué? Sigue leyendo ...

Así es como funciona JSONP en pocas palabras:

JSONP no utiliza XMLHttpRequest como las solicitudes AJAX regulares. En cambio, inyecta una etiqueta <script> en la página, donde el atributo "src" es la URL de la solicitud. El contenido de la respuesta está envuelto en una función Javascript que luego se ejecuta cuando se descarga.

Por ejemplo.

Solicitud JSONP: https://api.site.com/endpoint?this=that&callback=myFunc

Javascript inyectará esta etiqueta de script en el DOM:

<script src="https://api.site.com/endpoint?this=that&callback=myFunc"></script>

¿Qué sucede cuando se agrega una etiqueta <script> al DOM? Obviamente, se ejecuta.

Supongamos que la respuesta a esta consulta arroja un resultado JSON como:

{"answer":42}

Para el navegador, eso es lo mismo que el origen de un script, por lo que se ejecuta. Pero, ¿qué sucede cuando ejecutas esto?

<script>{"answer":42}</script>

Pues nada. Es solo un objeto. No se almacena, guarda ni sucede nada.

Esta es la razón por la cual las solicitudes JSONP envuelven sus resultados en una función. El servidor, que debe admitir la serialización de JSONP, ve el parámetro de callback que especificó, y lo devuelve en su lugar:

myFunc({"answer":42})

Entonces esto se ejecuta en su lugar:

<script>myFunc({"answer":42})</script>

... que es mucho más útil. En algún lugar de su código se encuentra, en este caso, una función global llamada myFunc :

myFunc(data)
{
alert("The answer to life, the universe, and everything is: " + data.answer);
}

Eso es. Esa es la "magia" de JSONP. Luego, construir un tiempo de espera es muy simple, como se muestra arriba. Haga la solicitud e inmediatamente después, comience un tiempo de espera. Después de X segundos, si su bandera todavía no se ha establecido, la solicitud ha excedido el tiempo de espera.

Answer 2

Mayby esto funciona?

.complete(function(response, status) {
if (response.status == "404")
alert("404 Error");
else{
//Do something
}
if(status == "error")
alert("Error");
else{
//Do something
}
});

No sé cuando el estado va en modo "error". Pero lo probé con 404 y respondió

Answer 3

Parece que esto está funcionando ahora:

jQuery(document).ajaxError(function(event, request, settings){
alert("Error");
});

Answer 4

Parece que las solicitudes JSONP que no devuelven un resultado exitoso nunca desencadenan ningún evento, éxito o falla, y para bien o para mal, aparentemente es por diseño.

Después de buscar en su rastreador de errores, hay un parche que puede ser una solución posible utilizando una devolución de llamada de tiempo de espera. Ver informe de error # 3442 . Si no puede capturar el error, al menos puede agotar el tiempo de espera después de esperar una cantidad razonable de tiempo para el éxito.

Answer 5

Sé que esta pregunta es un poco antigua, pero no vi una respuesta que ofrezca una solución simple al problema, así que pensé que compartiría mi solución ''simple''.

$.getJSON("example.json", function() {
console.log( "success" );
}).fail(function() {
console.log( "error" );
});

Simplemente podemos usar la devolución de llamada .fail() para verificar si ocurrió un error.

Espero que esto ayude :)

Answer 6

Si colabora con el proveedor, puede enviar otro parámetro de cadena de consulta que sea la función para devolver la llamada cuando haya un error.

? callback =? & error =?

Esto se llama JSONPE pero no es en absoluto un estándar de facto.

El proveedor pasa información a la función de error para ayudarlo a diagnosticar.

Sin embargo, no ayuda con los errores de comunicación: jQuery debería actualizarse para devolver la función de error al tiempo de espera, como en la respuesta de Adam Bellaire.

Answer 7

También publiqué esta respuesta en desbordamiento de pila: manejo de errores en llamadas getJSON

Sé que ha pasado un tiempo desde que alguien respondió aquí y el póster probablemente ya obtuvo su respuesta, ya sea desde aquí o desde otro lugar. Sin embargo, creo que esta publicación ayudará a cualquiera que busque una forma de realizar un seguimiento de los errores y los tiempos de espera mientras realiza las solicitudes getJSON. Por lo tanto, debajo de mi respuesta a la pregunta

La estructura getJSON es la siguiente (se encuentra en http://api.jqueri.com ):

$(selector).getJSON(url,data,success(data,status,xhr))

la mayoría de las personas implementan eso usando

$.getJSON(url, datatosend, function(data){
//do something with the data
});

donde usan la url var para proporcionar un enlace a los datos JSON, el datatosend como un lugar para agregar el "?callback=?" y otras variables que deben enviarse para obtener los datos correctos de JSON devueltos, y la función de éxito como una función para procesar los datos.

Sin embargo, puede agregar el estado y las variables xhr en su función de éxito. La variable de estado contiene una de las siguientes cadenas: "success", "notmodified", "error", "timeout" o "parsererror", y la variable xhr contiene el objeto XMLHttpRequest devuelto ( encontrado en w3schools )

$.getJSON(url, datatosend, function(data, status, xhr){
if (status == "success"){
//do something with the data
}else if (status == "timeout"){
alert("Something is wrong with the connection");
}else if (status == "error" || status == "parsererror" ){
alert("An error occured");
}else{
alert("datatosend did not change");
}
});

De esta forma, es fácil hacer un seguimiento de los tiempos de espera y los errores sin tener que implementar un rastreador de tiempo de espera personalizado que se inicia una vez que se realiza una solicitud.

Espero que esto ayude a alguien que todavía está buscando una respuesta a esta pregunta.

Answer 8

Yo uso esto para atrapar un error JSON

try {
$.getJSON(ajaxURL,callback).ajaxError();
} catch(err) {
alert("wow");
alert("Error : "+ err);
}

Editar: Alternativamente, puede obtener el mensaje de error también. Esto te permitirá saber cuál es el error exactamente. Intenta seguir la sintaxis en el bloque catch

alert("Error : " + err);

Answer 9

puede manejar explícitamente cualquier número de error agregando este atributo en la solicitud de ajax:

statusCode: {
404: function() {
alert("page not found");
}
}

entonces, tu código debería ser así:

jQuery.ajax({
type: "GET",
statusCode: {
404: function() {
alert("page not found");
}
},
url: handlerURL,
dataType: "jsonp",
success: function(results){
alert("Success!");
},
error: function(XMLHttpRequest, textStatus, errorThrown){
alert("Error");
}
});

Espero que esto te ayude :)

Answer 10

Here está mi amplia respuesta a una pregunta similar.

Aquí está el código:

jQuery.getJSON(handlerURL + "&callback=?",
function(jsonResult){
alert("Success!");
})
.done(function() { alert(''getJSON request succeeded!''); })
.fail(function(jqXHR, textStatus, errorThrown) { alert(''getJSON request failed! '' + textStatus); })
.always(function() { alert(''getJSON request ended!''); });