Ionic 4存储formdata并通过Internet连接进行同步

Question

我有一个应用程序，需要在离线模式下捕获狗。我使用了[[formdata，因为我将图像与剩余数据一起发送。我正在使用以下代码存储HTTP请求。

storeRequest(url, type, data) {
   this.sharedService.presentToast('Your data is stored locally because you 
   seem to be offline.');

   let action: StoredRequest = {
      url: url,
      type: type,
      data: data,
      time: new Date().getTime(),
      id: Math.random().toString(36).replace(/[^a-z]+/g, '').substr(0, 5)
   };

   return this.storage.get(STORAGE_REQ_KEY).then(storedOperations => {
      let storedObj = JSON.parse(storedOperations);

      if (storedObj) {
          storedObj.push(action);
      } else {
          storedObj = [action];
      }

      return this.storage.set(STORAGE_REQ_KEY, JSON.stringify(storedObj));
    });
 }

这里我正在存储所有请求。当我尝试检索数据时，我得到一个空对象。这就是为什么我无法将数据同步到服务器的原因。我已使用以下代码同步请求。
checkForEvents(): Observable<any> {
return from(this.storage.get(STORAGE_REQ_KEY)).pipe(
  switchMap((storedOperations: any) => {
    let storedObj = JSON.parse(storedOperations);
    console.log(storedObj);
    if (storedObj && storedObj.length > 0) {
      console.log(storedObj);
      return this.sendRequests(storedObj).pipe(
        finalize(() => {
          this.sharedService.presentToast('Local data succesfully synced to 
          API!');
          this.storage.remove(STORAGE_REQ_KEY);
        })
      );
    } else {
      console.log('no local events to sync');
      return of(false);
    }
  })
)
}

Answer 1

您可以收听窗口Online and offline events并执行操作，例如。

window.addEventListener('online',  ()=>{
//save your data
});

Answer 2

这是获取网络状态的示例。

首先，您需要运行以下命令来添加插件和安装软件包。

ionic cordova plugin add cordova-plugin-network-information
npm install @ionic-native/network

您可以使用此服务：
import { Injectable } from '@angular/core';
import { Network } from '@ionic-native/network/ngx';
import { Platform } from '@ionic/angular';
import { fromEvent, merge, of, Observable } from 'rxjs';
import { mapTo } from 'rxjs/operators';

@Injectable({
    providedIn: 'root'
})
export class NetworkService {
    private online$: Observable<boolean> = undefined;

    constructor(public network: Network, public platform: Platform) {
        this.online$ = new Observable(observer => {
            observer.next(true);
        }).pipe(mapTo(true));
        this.platform.ready().then(() => {
            if (this.platform.is('cordova')) {
                // on Device
                this.online$ = merge(
                    this.network.onConnect().pipe(mapTo(true)),
                    this.network.onDisconnect().pipe(mapTo(false))
                );
            } else {
                // on Browser
                this.online$ = merge(
                    of(navigator.onLine),
                    fromEvent(window, 'online').pipe(mapTo(true)),
                    fromEvent(window, 'offline').pipe(mapTo(false))
                );
            }
        });
    }

    public getNetworkType(): string {
        return this.network.type;
    }

    public getNetworkStatus(): Observable<boolean> {
        return this.online$;
    }
}

效果很好...
享受！