Ionic 3 - 异步 Http 调用和离子加载问题

Question

I would like to have some help about using Ionic LoadingController while having multiple HTTP calls that are processed in an async function.

Firstly, this is my async function with promises

LoadDatafromUrls(urLs) {
    return new Promise((resolve, reject) => {
      let loader = this.loadingCtrl.create({
        content: 'Son Bilgiler Alınıyor',
      });
      var urlCalls = [];
      urLs.forEach((entry: any) => {
        loader.present().then(()=>{
          this.http.get(entry.url).map((response : Response)=>{
            console.log(response.json());
            urlCalls.push(response.json());
          }).subscribe(()=>{
            console.log("subscribe");
          });
          loader.dismiss();
        })
      })
      Promise.resolve(urlCalls).then((res)=>{
        console.log(res);
        resolve(res);
      },
      (res)=>{
        reject(res);
      })
      //return Promise;
    })
  }

Secondly, I call it in this way.

RequestObject.LoadDatafromUrls(urLs).then((results)=>{
        console.log(results);
      },
      (errors)=>{
        console.log(errors);
      })

In this method, I am having the error message below :

Error message: Uncaught (in promise): removeView was not found . Moreover, it does not work in the way I am expecting.

I am really open to completely new methods, new ways. Please share if I can have any better implementation.

Answer 1

Because you are hiding the loader every time after getting a response from each call. Ionic throws this error when it tries to dismiss a loader but there is no loader on the view. Just dismiss the loader only after all calls has been resolved

 loader.present();
 urLs.forEach((entry: any) => {
     //   loader.present().then(()=>{
          urlCalls.push(this.http.get(entry.url).map((response : Response)=>{
            console.log(response.json());
            return response.json();
          }).subscribe(()=>{
            console.log("subscribe");
          }).toPromise());
         // loader.dismiss();
        })
     // })
 Promise.all(urlCalls).then((res)=>{
        console.log(res);
        resolve(res);
        loader.dismiss()
      },
      (res)=>{
        reject(res);
      })

EDIT : How to use resolve multiple observables?

    getData(urls){
     var loader = this.loadingCtrl.create({
       content : "Loading..."
     });
     loader.present();
     this.LoadDatafromUrls(urls).subscribe(res=>{
        console.log(res)//array of responses
        loader.dismiss();
     },err=>{
        console.log(err);// it will fire if any one call fails
        loader.dismiss();
      }); 
    }
    LoadDatafromUrls(urls){
     var arrObservables = [];         
     for(var i = 0; i < urls.length; i++){
         arrObservables.push(this.http.get(urls[i]).map((res: Response)=>{
           return res.json()
         }).catch((err: Response)=>{
           return Observable.throw(err);
         }))
     }
     return Observable.forkJoin(arrObservables);
    }

Remember : Add these import statement in your component :

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
import 'rxjs/add/observable/throw';
import 'rxjs/add/observable/forkJoin'