angular - TypeScript: Bästa sättet att skapa ett datalager

God eftermiddag, jag skapar en applikation i Ionic med Angular där den för närvarande hanterar två anslutningslägen: ansluten om användaren har internetåtkomst och frånkopplad om de inte har det

För närvarande har jag en funktion och det är att om användaren är i anslutet läge måste han anropa ett API, annars måste han göra anrop till frågor i SQLite:

komponent.exempel.ts

getUsers () {
  this.dataLayer.getUsers().subscribe (...)
}

data-access-layer.ts

getUsers () {
  if (this.connectionMode == 'online') {
     this.httpcliente.post (...)
  } else {
     this.sqliteclient.query ("...")
  }
}

Min fråga skulle vara vad som är det bästa sättet att implementera denna strategi, eftersom sättet att skapa villkor för att validera om anslutningen är den ena eller den andra inte verkar vara det bästa för mig eller kanske använda ett uppräkningsvärde

enum AccessDataSqLite {
   getUsers = "...",
   getData = "...",
}

Jag skulle uppskatta om du kan skicka mig referenser, länk eller ett bättre sätt att implementera denna strategi

Tack så mycket

Svar #1

Om du vill bygga detta beteende kan du helt enkelt implementera strategimönstret

Exempel :

import { Injectable } from "@angular/core";
import { fromEvent, merge } from "rxjs";
import { startWith, map } from "rxjs/operators";

interface Strategy {
  getData1(): any;
  anotherMethod(): any;
}

class SQLStrategy implements Strategy {
  getData1() {
    console.log("SQl", "getData1");
  }

  anotherMethod() {
    console.log("SQl", "anotherMethod");
  }
}

class HTTPStrategy implements Strategy {
  getData1() {
    console.log("HTTP", "getData1");
  }

  anotherMethod() {
    console.log("HTTP", "anotherMethod");
  }
}

@Injectable()
export class DataLayerService {
  private strategy;

  constructor() {
    // init strats
    const sqlStrategy = new SQLStrategy();
    const httpStrategy = new HTTPStrategy();

    merge(fromEvent(window, "online"), fromEvent(window, "offline"))
      .pipe(
        startWith(1),
        map(x => navigator.onLine)
      )
      .subscribe(x => {
        console.log("navigator.onLine", x);
        this.strategy = x ? httpStrategy : sqlStrategy;
      });
  }

  public getData1() {
    this.strategy.getData1();
  }

  public anotherMethod() {
    this.strategy.anotherMethod();
  }
}

Stackblitz: https://stackblitz.com/edit/angular-ivy-fggs4r?file=src/app/data-layer.service.ts

Relaterade artiklar