Promisse daughter is not getting into the father’s catch

Question

I have this generic method that recovers something from the server:

async criate(url: string, object: Object): Promise<any> {
    try {
        return response = await this.api().post( url, object );

    } catch (error) {
        console.log( 'API_ERROR: ', error.request.response, 'CODE: ', error.request.status );
    }
}

I have this model that consumes the above method:

async login() {
        this.loading = true;

        try {
            const user: User = await this.api.cri<User>(rotaUsuario.login, this.currentUser);

        } catch (e) {
            console.log( e );

        } finally {
            this.loading = false;
        }
    }

And finally the component that consumes the data:

this.store.login().then(() => this.navigation.navigate('Sessao')).catch(() => console.log('error'));

The problem is that when the generic method enters the catch even so the consuming component calls the then instead of calling the catch as I hope. How to fix this?

Answer 1

Rafael,

This is because your methods do not make the exception.

You can fix by throwing some custom error or throw the catch exception itself.

See an example of errors with asynchronous functions:

//Dessa forma não funciona, pois você acaba não retornando a exceção
async function maiorQueZero(value) {
  try {
    if (value > 0) {
      return value;
    }
    else {
      return funcao_nao_existe(value);
    }
  }
  catch(e) {
    //Acaba não retornando nada
    //Ou console.log
  }
}

//Dessa forma funciona, pois é feito o reject na promise
async function maiorIgualZero(value) {
  return new Promise( (resolve, reject) => {
    try {
      if (value >= 0) {
        resolve(value);
      }
      else {
        resolve(funcao_nao_existe(value));
      }
    }
    catch(e) {
      //Rejeita a promise...
      reject(e);
    }
  });
}

//Dessa forma também funciona, pois é lançada a exceção na função
async function menorIgualZero(value) {
  try {
    if (value <= 0) {
      return value;
    }
    else {
      return funcao_nao_existe(value);
    }
  }
  catch(e) {
    //Faz qualquer coisa aqui e lança a exceção
    throw e;
  }
}

//Essas utilizações não vão cair no catch
maiorQueZero(10)
  .then( result => console.log("maiorQueZero(10) = Não gerou erro") )
  .catch( error => console.log("maiorQueZero(10) = Gerou erro"));

//Deveria cair no catch, mas não vai cair...
maiorQueZero(0)
  .then( result => console.log("maiorQueZero(0) = Não gerou erro") )
  .catch( error => console.log("maiorQueZero(0) = Gerou erro"));

//Essas formas já caem no catch por conta do reject da promise
maiorIgualZero(0)
  .then( result => console.log("maiorIgualZero(0) = Não gerou erro") )
  .catch( error => console.log("maiorIgualZero(0) = Gerou erro"));

//Deve cair no catch
maiorIgualZero(-1)
  .then( result => console.log("maiorIgualZero(-1) = Não gerou erro") )
  .catch( error => console.log("maiorIgualZero(-1) = Gerou erro"));

//Essas formas também vão cair no catch por conta do thorw da exceção
menorIgualZero(0)
  .then( result => console.log("menorIgualZero(0) = Não gerou erro") )
  .catch( error => console.log("menorIgualZero(0) = Gerou erro"));

//Deve cair no catch
menorIgualZero(1)
  .then( result => console.log("menorIgualZero(1) = Não gerou erro") )
  .catch( error => console.log("menorIgualZero(1) = Gerou erro"));

Therefore, a possible correction in your code would be the following:

async criate(url: string, object: Object): Promise<any> {
    try {
        return response = await this.api().post( url, object );

    } catch (error) {
        throw new Error("API_ERROR: " + error.request.response + " CODE: " + error.request.status );
    }
}

async login() {
    this.loading = true;

    try {
        const user: User = await this.api.cri<User>(rotaUsuario.login, this.currentUser);

    } catch (e) {
        throw e;

    } finally {
        this.loading = false;
    }
}