Monitor method in Ionic 4

Question

Good morning.

In my code I have a method described below:

public async DownloadOperacaoCodigos() {

this.total = 0;
this.contador = 0;

// this.loading.presentNoDuration('Carregando Códigos de Operação');
this.loading.present();

//carrega dados
this.modelOperacao = new Operacao();  
debugger;  
this.operacaoDbService.GetAll()
  .then(async (result: any) => {        

    this.total = result.data.length;

    for (var i = 0; i < result.data.length; i++) {

      this.modelOperacao = new Operacao();

      var operacaoCodigo = result.data[i];

      this.modelOperacao.gid = operacaoCodigo.gid;
      this.modelOperacao.grupo = operacaoCodigo.grupo;
      this.modelOperacao.codigo = operacaoCodigo.codigo;
      this.modelOperacao.nome = operacaoCodigo.nome;
      this.modelOperacao.descricao = operacaoCodigo.descricao;

       await this.operacaoLocalService.Add(this.modelOperacao);

      this.contador += 1;          

      if (this.total == this.contador ) {
        this.loading.dismiss();
        this.toastCtrl.presentToast('Dados de operação baixado com sucesso.');
      }
    }                

  })
  .catch((error: any) => {
    this.loading.dismiss();
    this.toastCtrl.presentToast('Erro ao inserir dados de operação no dispositivo.');
  });

It takes a certain time to run, this is no problem, it takes even.

The question would be: I can monitor this process anywhere in the app? The user leaves the page and display something that the process is still running?

Answer 1

I’ve been through something similar on startup of my app, I was able to resolve changing the consumption of the api from Promise to Observable would look something like.

api.service.ts

  import {Observable} from 'rxjs';
    ....
   get(endpoint: string, headers?: HttpHeaders , params?: any): Observable<any>{

    if(!headers) {
      headers = this.setHeaders();
    }
    if(!params){
      params = this.setParams();
    }
     const OPTIONS = {
      headers:   headers,
      params:    params
      };        

      return this.http.get(`${endpoint}`,   OPTIONS  ) ;
    }

app.componentts.

...
this.apiService.get('/user').subscribe(
_result => this.user = _result);

...

With this my app performed several other tasks without me having to wait... but in case you need the result on time then you need to use it like this:

 this.apiService.get('/user').subscribe(
    _result => { 
          if(_result) {
                       .... coloca sua lógica aqui

                     }
               });

I’m also a beginner and I hope I’ve helped.