angular 4 loading.dismiss() not working

Question

I am trying to do loading.dismiss() inside handleError() method , but not sure how to do? it is perfectly working while the response is good, not sure how to handle error case

please help

@Injectable()

export class SharedProvider {

 private _postsURL = "https://jsonplaceholder.typicode.com/posts";

 constructor(private http: Http, public loadingCtrl: LoadingController) {
 }



 getPosts(): Observable<IPosts[]> {

    let loading = this.loadingCtrl.create({
        content: 'loading...'
      });
      loading.present();
     return this.http
         .get(this._postsURL)
         .map((response: Response) => {
            loading.dismiss();
            console.log("Result printed!!");
             return <IPosts[]>response.json();

         })
         .catch(this.handleError);


 }

  handleError(error: Response) {
      this.loading.dismiss();
     console.log("Err printed!!" + error.statusText);
     return Observable.throw(error.statusText);
 }

}

Answer 1

The loading object doesn't exists in your handleError method because it's scoped to getPosts() so you can't have access to it, it could be possible if the loading was globally set or a property of your class. There's a couple solutions i think that can solve this:

First is dismissing your loading and then calling handleError:

// your getPosts method ...
.catch(err =>{
  loading.dismiss();
  this.handleError(err);
});

The second one (as said) is creating a property loading and using it instead of a scoped loading object.

 private _postsURL = "https://jsonplaceholder.typicode.com/posts";
 public loading;
 constructor(private http: Http, public loadingCtrl: LoadingController) {
 }

 getPosts(): Observable<IPosts[]> {
   this.loading = this.loadingCtrl.create({ content: 'loading...' });
   this.loading.present().then(() =>{
     return this.http
         .get(this._postsURL)
         .map((response: Response) => {
            this.loading.dismiss();
            console.log("Result printed!!");
             return <IPosts[]>response.json();

         })
         .catch(this.handleError);
   });
 }

Also try to wrap your method content in the promise returned by the loading present() method, there's a lot of concurrency errors of the method dismiss() being triggered before the loading (or any other presentable component) is even shown to the user.

Anyway, one of the solutions may work to you, hope it helps.

Answer 2

Am just going to drop this for Inoic 4 users

const loading = await this.loadingController.create({ message: 'Processing card' })
      loading.present().then( () => {
          getPostFunction({
              data: {email:"[email protected]"}
          }).then((response) => {
              loading.dismiss();
              console.log(response);
          }, (error) => {
               loading.dismiss();
              console.log(error)
          });
      })