javascript - EAI Content Enricher 的数据获取模式

Question

我正在本地存储中保存页面的设置。工作得很好。

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

现在，相同的服务类应该仅返回金额。现在，当然，这返回了一个 promise 。很好，但我想首先分解 amount 和 hours 数据集，只返回 amount。像这样的东西:(当然这是行不通的，因为函数已经完成，而异步数据获取仍在进行中)。

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

    return this.amount;
  }

无论如何，处理此类数据分解的最佳实践或模式是什么？

• 还从此函数返回一个新的 Promise 或 ..
• 只需返回一个数字，即金额。

如果我想到EAI pattern Content Enricher从不同来源收集数据，为了组成一个更智能的返回值，还需要在所有部分数据到达之前进行阻塞。那么，我们如何阻止 JavaScript 和 TS/Angular 中的数据获取呢？

感谢您分享您的想法。

Answer 1

我至少看到两件事:1)为什么要将数据保存在数组中:[金额，小时]？最好创建一个模型接口(interface)，并将其存储在对象(而不是数组)中:

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

2)一旦你有了模型，那么它就会非常简单。你应该使用 Observable 而不是 Promise。一旦你有了 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));