Angular 5: служба данных, загрузка начальных значений

Question

Я загружаю финансовые транзакции в базу данных MySQL и использую PHP restful API и угловой 5-интерфейс для создания отчетов. Используя выпадающие списки, пользователи могут выбирать даты начала и окончания и создавать отчеты за разные периоды. Я создал сервис DateService, который начинается с двух начальных значений (thismo и lastmo) и назначает их переменным даты (datev и datevb).

private datevSource = new BehaviorSubject <string> (this.thismo);
datev = this.datevSource.asObservable();
private datevbSource = new BehaviorSubject <string> (this.lastmo);
datevb = this.datevbSource.asObservable();

datev (дата окончания) и datevb (дата начала) используются для запроса базы данных для генерации отчетов. Пользователь может изменять эти даты так часто, как ему нравится, и значения сохраняются в DateService. Если они переходят к другому отчету, последние выбранные значения сохраняются в DateService. Они также могут сбросить значения по умолчанию (thismo & lastmo).

setDates(datevar, datevarb) {
    this.datev = datevar;
    this.datevb = datevarb;
    }
reDate() {
   this.datevSource.next(this.thismo);
   this.datevbSource.next(this.lastmo);
   }

Thismo и lastmo не меняются, когда пользователь создает отчеты. В настоящее время значения жестко заданы, и я меняю их в сервисе и перестраиваю / загружаю приложение при каждом обновлении базы данных (обычно раз в месяц). Не похоже, что мне нужно перестраивать приложение, чтобы просто изменить эти две переменные.

Я создал новую таблицу в базе данных, в которой хранятся эти значения, и хотел бы один раз нажать API, чтобы сохранить thismo и lastmo, когда пользователь обращается к приложению. Как я могу изменить свой datevSource, чтобы проверить, был ли thismo загружен из API, загрузить, если он не загружен, и затем передать значение как обычно? Я попытался создать новую переменную (firstrun = 0) и увеличить ее при запуске функции (loadGlobals), но другие функции, которые запрашивают базу данных, запускаются до завершения loadGlobals.

Я мог бы обманывать и загружать thismo из базы данных каждый раз, но я стараюсь избегать попадания в API каждый раз, когда кто-то переходит на новую страницу.

Буду признателен за любые советы или указатели.

Answer 1

Похоже, у вас есть 2 значения, которые меняются не часто.

Вы хотите получить их из API, но не хотите вызывать его каждый раз.

Это простая проблема с кэшированием.

Существуют различные способы приблизиться к кешированию в приложении Angular. Вы можете кэшировать ответ от API в сервисе. Если служба уже получила ответ API, вернуть возвращенные ранее значения. Примерно так:

@Injectable()
export class ThismoService {

  constructor(private http: HttpClient) {}

  private thismo 

  public getThismo(): Observable<any> {
    if (this.thismo == null) {
      return this.http.get('/thismo').pipe(
        map(response => response.thismo),
        tap(thismo => this.thismo = thismo)
      )
    } else {
      return of(this.thismo)
    }   
  }
}

Более профессиональным подходом было бы использование глобального решения для магазина на основе Redux, например ngrx . Доступ к магазину можно получить в любое время из любого места, и он отлично подходит для кэширования. Вы можете ввести логику в кэш на 1 день, а затем извлекать из API один раз в день. Если вы собираетесь использовать ngrx, хорошие навыки RxJs очень полезны.

К сожалению, учебники по ngrx, как правило, являются мусором - если вы можете себе это позволить, это отличный курс по ngrx по Udemy - https://www.udemy.com/ngrx-course/learn/v4/content