0

Hola estoy desarrollando una aplicación en Vue.js,Nativescript y Vuex, al momento de hacer una peticion ajax en un action retorno una promesa para manejar asincronia el problema es que cuando se genera un error este no se captura al momento de llamar al metodo pero cuando esta todo bien funciona.

en el metodo del action coloque una url que no existe para llevar al error pero no pasa por este, que creen que pueda ser.

metodo del action

CrearUsuario(context,objeto){
   console.log("el valor de objeto antes de enviar es " + JSON.stringify(objeto));
   return new Promise((resolve,reject)=>{ //usando promesas para controlar asincronia de peticion
   http.request({
                 url     : servidor + "/api/personas/thisUrlDoesntExist",
                 method  : "POST",
                 headers : { "Content-Type": "application/json" },
                 content : JSON.stringify({objeto  })

   }).then( response => { 
            console.log("estamos usando json");
            console.log("el valor total es " +  JSON.stringify(response));
            var result = response.content.toJSON();
            context.commit('SetJson',result);
            resolve(response);
            }, 
            error => {
            //console.error(error);
            reject(error);
          });
 })
}

codigo al llamar metodo del action

            Insertar(){
                var objeto={
                            ":PA_PAIS_ID" : this.form.txtpaisId,
                            ":PE_NOMBRE"  : this.form.txtNombre,
                            ":PE_CORREO"  : this.form.txtCorreo,
                            ":PE_CLAVE"   : this.form.txtpass
                }
                this.$store.dispatch('CrearUsuario',objeto).then(response => {                  
                  //al ser success funciona perfecto y pasa por aqui
                  console.log("terminamos la peticion");
                  this.isBusy=false;
                },
                 // al manejar error no funciona no muestra mensaje
                 error=>{
                    console.log("error en peticion " + error );
                    this.isBusy=false;
                 }
                );

            },

por ultimo cabe mencionar que estoy usando el modulo http de Nativescript para hacer la petición al servidor.

2
  • Podrías probar encadenar el then luego del dispatch a un catch. Dado que el dispatch retorna una promesa, un rejection dentro de ella debiera caer en un catch y no en un segundo callback del then.
    – ffflabs
    Commented el 18 sept. 2018 a las 19:02
  • @amenadiel funciono cambie en los dos metodos y puse el catch luego del then y funciono, podrias publicar la respuesta para aceptarla como correcta Commented el 19 sept. 2018 a las 21:42

1 respuesta 1

1

se declara una mutación en Vuex que devuelve una promesa. Cuando ésta se resuelve, el store cambia su estado al valor con que se resolvió la promesa, pero para lo que nos convoca, setear el estado en vuex retorna una promesa:

this.$store.dispatch('CrearUsuario',objeto) // retorna una promesa

Como toda promesa, expone un método then cuyo primer parámetro debiera ser una función que se invoca con el valor con que la promesa se resuelve. Entonces:

this.$store.dispatch('CrearUsuario',objeto).then( (response) => {
  console.log('la promesa se resuelve con response:',response);
});

Hasta ahí estamos bien.

Respuesta corta

La especificación de una Promesa dice que:

  • La promesa expone un método then
  • El método then retorna de por sí una promesa
  • El método then acepta dos parámetros (funciones) (onFulfilled, onRejected)
  • La promesa expone un método catch
  • El método catch retorna por sí una promesa
  • El método catch acepta un parámetro (función) onRejected

Entonces:

this.$store.dispatch('CrearUsuario',objeto)
.then( response => { /* se invoca si todo sale bien */ },
       error => { /* podría invocarse si algo falla */ }
)
.catch( error => { /* se invoca si algo falla */ });

Aparentemente el módulo http no toma en cuenta el segundo parámetro de then. Nunca invoca onRejected sino que usa throw y asume que tú del otro lado pondrás un catch para atrapar el error.

Muchas librerías actuales siguen la misma práctica. Si existe el catch ¿Para qué usar el segundo parámetro de then?

Respuesta Extendida

Como el método then devuelve una promesa, es evidente que puedes declarar una cadena de promesas. Si tienes una serie de funciones devuelvePromesa1, devuelvePromesa2, devuelvePromesa3, puedes llamarlas en serie y atrapar todos los errores intermedios con un catch final, haciendo:

return devuelvePromesa1(arg1)
  .then((res_prom1)=>{
    return devuelvePromesa2(res_prom1);
  })
  .then((res_prom2)=>{
    return devuelvePromesa3(res_prom2);
  })
  .then((res_prom3)=>{
    return devuelvePromesa4(res_prom3);
  })
  .catch((error)=> {
    console.error('algo falló', error);
  });

El catch final atrapa cualquier error que se produzca entre medio, sin importar en qué paso ocurrió.

Pero momento. Volvamos atrás. Como se dijo:

El método then acepta dos parámetros (funciones) (onFulfilled, onRejected)

De manera que lo anterior podría reescribirse como:

return devuelvePromesa1(arg1)
  .then((res_prom1)=>{
          return devuelvePromesa2(res_prom1);
        }, 
        (err_prom1)=> {
          console.error('falló la promesa 1', err_prom1);
          throw err_prom1;
        })
  .then((res_prom2)=>{
          return devuelvePromesa3(res_prom2);
        }, (err_prom2)=> {
          console.error('falló la promesa 2', err_prom2);
          throw err_prom2;
        })
  .then((res_prom3)=>{
         return devuelvePromesa4(res_prom3);
        }, (err_prom3)=> {
          console.error('falló la promesa 3', err_prom3);
          throw err_prom3;
       })
  .catch((error)=> {
    console.error(error);
  });

Salvo casos de uso muy específicos ¿Quién querría molestarse en declarar un handler de rechazo para cada promesa intermedia? Para ser más prácticos, el uso del segundo parámetro de then, aunque sigue siendo permitido por la especificación, se considera un antipatrón:

The .then(success, fail) anti-pattern

Almost a sure sign of using promises as glorified callbacks. Instead of doThat(function(err, success)) you do doThat().then(success, err) and rationalize to yourself that at least the code is "less coupled" or something.

The .then signature is mostly about interop, there is almost never a reason to use .then(success, fail) in application code.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

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