шаблон выборки данных для EAI Content Enricher

Question

Я сохраняю настройки страницы в локальном хранилище.Работает просто отлично.

const settings = [amount, hours]
localStorage.setItem('settings', JSON.stringify(settings));

Теперь тот же класс обслуживания должен возвращать только amount.Теперь, конечно, это возвращает обещание.Хорошо, но я хочу сначала разбить набор данных amount и hours, чтобы получить только amount.Примерно так: (конечно, это не сработает, потому что функция завершена, пока асинхронная выборка данных все еще находится в процессе).

public getAmount(){
    this.storage.get('settings').then((settings) => {
      console.log('SettingsService: settings=' + settings[0]);
      this.amount= settings[0];
    });

    return this.amount;
  }

Во всяком случае, что является наилучшей практикой или шаблон для обработки такихдекомпозиция данных?

• также возвращает новое обещание от этой функции или ..
• просто возвращает число, то есть amount.

Если я подумаю о шаблоне EAI Content Enricher , который собирает данные из разных источников, чтобы составить более разумное возвращаемое значение, необходимо также заблокировать, прежде чем все частичные данные будут получены.Итак, как нам блокировать выборку данных в JavasScript соответственно TS / Angular?

Спасибо за то, что поделились своими идеями.

Answer 1

вижу как минимум две вещи: 1) Почему вы сохраняете свои данные в массиве: [amount, hours]? Было бы намного лучше создать интерфейс модели и сохранить его в объекте (не в массиве):

export interface Settings {
   amount: Amount; // or maybe number - choice is yours?
   hours: number;
}

2) Как только у вас появится модель, она будет действительно прямой. Вы должны использовать Observable вместо Promises. Если у вас есть Observable - очень легко отобразить настройки на суммы:

import { from } from 'rxjs';

var observableFromPromise =  from(promiseSrc);
public getAmount(): Observable<Amount> {
    from(this.storage.get('settings')).pipe(
        map((settings: Settings) => settings.amount)
    );
}

Тогда вы сможете использовать значение суммы в шаблоне или в другом компоненте / услуге

// create observable field in component.ts
public amount$: Observable<Amount> = service.getAmount();

// use in component.html
<p>{{amount$ | async}}</p>

// or use in component.ts
this.amount$.subscribe(amount => console.log('this is the amount:', amount));