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 pattern Content Enricher从不同的来源收集数据，以组成一个更智能的返回值，则还需要在所有部分数据到达之前进行阻塞。那么，我们如何分别在JavasScript和TS / Angular中阻止数据获取？

感谢分享您的想法。

Answer 1

我至少看到两件事： 1）为什么将数据保存在export interface Settings { amount: Amount; // or maybe number - choice is yours? hours: number; }数组中？创建一个模型接口并将其存储在对象（而不是数组）中会更好：

import { from } from 'rxjs';

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

2）一旦有了模型，那么它将非常简单。您应该使用Observable而不是Promises。一旦有了“可观察的”-将设置映射到数量真的很容易：

// 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));

然后，您将可以在模板或其他组件/服务中使用金额值

'corsheaders.middleware.CorsMiddleware',

EAI Content Enricher的数据获取模式

1 个答案: