Cancel/stop all get and loading controller when clicked button

Ionic Framework ionic-v3
1

hello World,

when a user login, i save user data in storage

when a user login, user data is saved in storage,

getStorage() {
this.storages.getObject().then((data) => {
this.user = data;
});
}

this is the code for a get from a API and i added a loading controller

         this.http.get('https://thewebsite/api/book/view/' + this.id).subscribe(response => {    
         this.book = response;

         this.storage.set('book chapters', response['book_chapters']).then(() => {
         console.log('books saved to storage');

         this.storage.get('book chapters').then(val => {
         this.bookchapters = val;


           if (this.user !=null){
              setTimeout(() => {
                this.inform();
              }, 1000);
            }
          }


         });
         });
         });

this is the code for loading controller, if there

  async inform() {

  const alert = await this.alertController.create({
  cssClass: 'my-custom-class',
  header: 'Go to last read Chapter ',
  message: 'want to read saved Chapter?',
  buttons: [
    {
      text: 'Cancel',
      role: 'cancel',
      cssClass: 'secondary',
      handler: (blah) => {
        console.log('Confirm Cancel: blah');
      }
    }, {
      text: 'Confirm',
      handler: () => {
        
      }
    }
  ],
  });
  await alert.present();
}

my question, i have a (click)=“goBack()” button to allow user to go back home page, but due to the heavy load, the get request is still working in the background. resulting to Loading Controller alert message when its back to home page.

i did not learn how to use Listener or Observables rxjs so .unsubscribe() does not work when i tried to unsubscribe the http.get…

is there a way to stop all the get or loading of data when the back button is clicked?

thank you

:bowing_man: :bowing_man: :bowing_man:

2

This is really the canonical answer, so I would suggest studying RxJS. Furthermore, you’ve got a combination of inefficiency and race conditions surrounding storage. Any time I see a magic number fed to a setTimeout I get concerned.

The way I handle this is to only read from storage once, at app startup (or the first time something is requested). I never do what you’re doing of read from network → write to storage → read back from storage. It’s inefficient to wait for the storage write and read, and if you don’t wait, it’s easy to read back stale data.

So I would optimistically write the result from the network to storage, but not read it back. That should eliminate your timeout. Also I would rearchitect getStorage to actually return something, because the way you have it, it’s useless. Nobody outside that function has any way of knowing when the assignment to this.user has happened.

3

Happy Sunday, Rapropos! thank you for your suggestions, i will modify the part of network → write to storage part to speed up the time as i have read a few topics which you replied in other threads about the using of storage ('like a backup).

i tried to learn rjxs but unfortunately the sifus whom i knew in my country they told me they don’t use Promises Observables, rxjs for their ionic apps at all… this is one of the part i will try experimenting on.

thank you

:bowing_man: :bowing_man: :bowing_man: