Ionic 3 - Asynchrone Http-Aufrufe und Ionic Loading Problem

Question

Ich hätte gerne Hilfe zur Verwendung des Ionic LoadingControllers mit mehreren http-Aufrufen, die in einer asynchronen Funktion verarbeitet werden.

Erstens, das ist meine Asynchron-Funktion mit dem Versprechen

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; 
 
    }) 
 
    }

Zweitens, ich nenne es auf diese Weise.

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

Bei dieser Methode habe ich die Fehlermeldung unter:

Fehlermeldung: "Nicht abgefangene (in Versprechen): RemoveView nicht gefunden wurde". Außerdem funktioniert es nicht so, wie ich es erwarte.

Ich bin wirklich offen für immer neue Methoden, neue Wege. Bitte teilen Sie, wenn ich eine bessere Implementierung haben kann.

Answer 1

Weil Sie den Loader jedes Mal verstecken, nachdem Sie eine Antwort von jedem Anruf erhalten haben. Ionic löst diesen Fehler aus, wenn versucht wird, einen Loader zu schließen, aber kein Loader in der Ansicht vorhanden ist. entlassen Sie einfach den Lader erst, nachdem alle Anrufe

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 behoben wurde: Wie man verwendet mehrere Observablen lösen?

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); 
    } 

Denken Sie daran: diese Import-Anweisung in Ihrer Komponente hinzufügen:

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'