Ionic 3 mit vielen Daten

Question

Ich habe ein Problem mit einer ionic3 App, die ich entwickelt habe. Mit meiner App verbinde ich mich mit einem JSON-Server und lade viele Zeilen herunter, wenn ich alle Zeilen mit einem for habe, in jeder Zeile call to funcion, um Daten einzufügen. aber ich denke, mein für ist schneller als einfügen funcion und show finalice alarm vor ende. dies ist mein Code:

private downloadRows() 
{ 
this.platform.ready().then(()=>{ 
    this.translateService.get('ACTUALIZANDOBARRANCOS').subscribe(
    value => { 
    let loadingContent = value; 
    let loader = this.loadingController.create({ 
    content: loadingContent, 
    spinner: "bubbles" 
    }); 

    this.servicioDownloads.downloadAllRows().then(rows=> { 
     this.datosrows= rows; 
     loader.present(); 
     for (var i = 0; i < this.datosrows.length; i++) 
     { 
      var datos = this.datosrows[i]; 
      // we are going to insert rows 
      this.servicioDataBase.insertRow 
      (datos.indice, 
      datos.row1, 
      datos.row2, 
      datos.row3, 
      datos.row4, 
      datos.row5, 
      datos.row6, 
      datos.row7, 
      datos.row8, 
      datos.row9, 
      datos.row10, 
      //... 
      datos.row30 
     ).catch(()=>{ 
      console.log("da error"); 
      }); 
     } 
     loader.dismiss(); 
     this.translateService.get('FINALIZADO').subscribe(
       Titulo =>{ 
        let titulo = Titulo; 

       this.translateService.get('BARRANCOSACTUALIZADOS').subscribe(
        Descripcion =>{ 
         let descripcion = Descripcion; 
         let alerta = this.alertCtrl.create({ 
         title: titulo, 
         subTitle: descripcion, 
         buttons: ['OK'] 
         }) 
         alerta.present(); 
        } 
       ); 
       } 
      ); 


    }).catch(error=>{ 
    loader.dismiss(); 
     this.translateService.get('ERROR').subscribe(
       Titulo =>{ 
        let titulo = Titulo; 

    this.translateService.get('ERRORDESCARGABARRANCOS').subscribe(
        Descripcion =>{ 
         let descripcion = Descripcion; 
         let alerta = this.alertCtrl.create({ 
         title: titulo, 
         subTitle: descripcion, 
         buttons: ['OK'] 
         }) 
         alerta.present(); 
        } 
       ); 
       } 
     ); 
    }) 
}); 
}) 

}

// Das ist Insert Dienste

public insertRow(indice: any, row1: any, row2: any, row3: any, row4: any, 
    row5: any, row6: any, row7: any, row8: any, row9: any, row10: any, 
    row30: any) 
{  
    let sql = "INSERT INTO TableRows (id,Nombre,Rio,Pais,Comunidad, 
    Zona,Localidad,Interes,Caracter,Cascada_max,Cuerda_max,Desnivel, 
    Longitud, Tiempo_aprox,Tiempo_descenso,Tiempo_retorno,Observaciones, 
    Descripcion_barranco,Periodo_optimo,Caudal,Caudal_filtro,Aproximacion, 
    Retorno,Loc_entrada_barranco,Loc_salida_barranco,Loc_entrada_parking, 
    Loc_salida_parking,Autor,Actualizacion,Idioma,Visible) 
    VALUES(?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?,?)"; 
    console.log(sql); 
    return this.isReady() 
    .then(()=>{ 
     return this.database.executeSql(sql, 
      [indice,BARRANCO, RIO, PAIS,COMUNIDAD, 
       ZONA,LOCALIDAD,INTERES,CARACTER, CASCADA_MAX, 
       CUERDA_MAX,DESNIVEL,LONGITUD,TIEMPO_APROX, 
       TIEMPO_DESCENSO,TIEMPO_RETORNO, OBSERVACIONES, 
       DESCRIPCION_BARRANCO,PERIODO_OPTIMO,CAUDAL, 
       CAUDAL_FILTRO,APROXIMACION, RETORNO, 
       LOC_ENTRADA_BARRANCO,LOC_SALIDA_BARRANCO, 
       LOC_ENTRADA_PARKING, LOC_SALIDA_PARKING, 
       AUTOR,actualización,idioma, visible]); 
    }).then((data)=>{ 
    console.log("El insert devuelve esto " + JSON.stringify(data)); 
    })   

} 

Jemand weiß, wie kann ich auf Zeit zu tun, ich meine ein, wenn für Ende?

vielen dank!

Answer 1

Verwenden Sie einfach async/await in Ihrer Funktion, so können Sie asynchrone Funktionen sequentiell aufrufen (seit Typescript 2.1 können Sie async/await auf ES3/ES5 herunterstufen). So Lösung in Ihrem Beispiel könnte wie folgt aussehen:

 
private downloadRows() 
{ 
this.platform.ready().then(()=>{ 
    this.translateService.get('ACTUALIZANDOBARRANCOS').subscribe(
    async value => { 
     let loadingContent = value; 
     let loader = this.loadingController.create({ 
      content: loadingContent, 
      spinner: "bubbles" 
     }); 

     let rows = await this.servicioDownloads.downloadAllRows(); 
     loader.present(); 
     for (let datos of rows) { 
      // we are going to insert rows 
      try { 
      await this.servicioDataBase.insertRow 
       (datos.indice, 
       datos.row1, 
       datos.row2, 
       datos.row3, 
       datos.row4, 
       datos.row5, 
       datos.row6, 
       datos.row7, 
       datos.row8, 
       datos.row9, 
       datos.row10, 
       //... 
       datos.row30 
      ); 
      } 
      catch(error) { 
       console.log(error); 
      } 
     } 
     loader.dismiss(); 
     this.translateService.get('FINALIZADO').subscribe(
       Titulo =>{ 
        let titulo = Titulo; 

       this.translateService.get('BARRANCOSACTUALIZADOS').subscribe(
        Descripcion =>{ 
         let descripcion = Descripcion; 
         let alerta = this.alertCtrl.create({ 
         title: titulo, 
         subTitle: descripcion, 
         buttons: ['OK'] 
         }) 
         alerta.present(); 
        } 
       ); 
       } 
      ); 
    }).catch(error=>{ 
    loader.dismiss(); 
     this.translateService.get('ERROR').subscribe(
       Titulo =>{ 
        let titulo = Titulo; 

    this.translateService.get('ERRORDESCARGABARRANCOS').subscribe(
        Descripcion =>{ 
         let descripcion = Descripcion; 
         let alerta = this.alertCtrl.create({ 
         title: titulo, 
         subTitle: descripcion, 
         buttons: ['OK'] 
         }) 
         alerta.present(); 
        } 
       ); 
       } 
     ); 
    }) 
}); 
}) 

await in für den Zyklus für Zyklus verhindert zu beenden, bevor Einsatz tatsächlich durchgeführt wird.

Answer 2

SQLite Porter - Dieses Cordova/Phonegap-Plugin kann zum Importieren/Exportieren zu/von einer SQLite-Datenbank mit SQL oder JSON verwendet werden.

Installation:

$ ionic cordova plugin add uk.co.workingedge.cordova.plugin.sqliteporter 
$ npm install --save @ionic-native/sqlite-porter 

Verbrauch:

import { SQLitePorter } from '@ionic-native/sqlite-porter'; 


constructor(private sqlitePorter: SQLitePorter) { } 

... 

let db = window.openDatabase('Test', '1.0', 'TestDB', 1 * 1024); 
// or we can use SQLite plugin 
// we will assume that we injected SQLite into this component as sqlite 
this.sqlite.create({ 
    name: 'data.db', 
    location: 'default' 
}) 
    .then((db: any) => { 
    let dbInstance = db._objectInstance; 
    // we can pass db._objectInstance as the database option in all SQLitePorter methods 
    }); 


let sql = 'CREATE TABLE Artist ([Id] PRIMARY KEY, [Title]);' + 
      'INSERT INTO Artist(Id,Title) VALUES ("1","Fred");'; 

this.sqlitePorter.importSqlToDb(db, sql) 
    .then(() => console.log('Imported')) 
    .catch(e => console.error(e)); 

Sie versuchen cordova-sqlite-porter verwenden können. Übergeben Sie Ihre Einsätze als eine JSON-Struktur mit importJsonToDb() und es wird in die SQLite DB.

Die example project zeigt Einfügen von 15.000 Datensätze. Auf ein Samsung Galaxy S4, die Durchführung mit einzelnen SQL einfügen Anweisungen dauert etwa 5 Minuten/300 Sekunden, aber die optimierte JSON entspricht (mit UNION SELECT - see here for info) dauert rund 3 Sekunden auf dem gleichen Gerät - 100x schneller. - source