使用 Promise 初始化数据

Question

我在数据初始化和承诺方面真的很挣扎。我正在使用带有 Angular 和 Ionic 存储的 Ionic 3，但我的问题主要与 Promise 的运作方式有关。

基本上我想实现以下目标：

• 当我的应用启动时，它应该使用本地存储集合
• 如果本地存储集合不存在或为空，使用http新建一个
• 如果 http 失败，请使用本地数据创建一个集合。

到目前为止我的解决方案：

getNewsItems():Promise<any> {
  return this.storage.get(this.newsKey).then((data) => {
    if(data == null)
    { 
      return (this.buildNewsItemsViaHttp());
    } else {
      return (data);
    }
  });
}

private buildNewsItemsViaHttp(){
  return new Promise(resolve => {
    this.http.get('some/url/to/fetch/data')
      .subscribe(
        data => {
          this.newsCollection = data;
          this.storage.set(this.newsKey, this.newsCollection);
          resolve(this.newsCollection);
        },
        (err) => {
          resolve (this.buildNewsItemsViaLocalJSON());
        }
      );
});
}

private buildNewsItemsViaLocalJSON() {
  return new Promise(resolve => {
    this.http.get('assets/data/newsCollectionLocal.json')
      .subscribe(
        data => {
          this.newsCollection = data;
          this.storage.set(this.newsKey, this.newsCollection);
          resolve(this.newsCollection);
        },
        (err) => {
          console.log(err);
        }
      );
});}

我不喜欢它的某些部分，例如在一个 Promise 中返回一个 Promise - 这真的是个问题吗？

提前致谢

Answer 1

一个干净的解决方案可能是使用 async\await 方法：

async buildNewsItemsViaHttp(){
   return await this.http.get()....
}

async buildNewsItemsViaLocalJSON(){
   return await this.http.get()....
}

async getNewsItems(){
   return await this.storage.get()...
}

async getItems(){
     return ((await this.getNewsItems()) || (await this.buildNewsItemsViaLocalJSON()) || (await this.buildNewsItemsViaHttp()));
}

用法：

const items = await this.getItems();

您可以优化资源，缓存它们并在每个函数中返回它们。 示例：

async buildNewsItemsViaHttp(){
   let result = cache.get(); // todo

   if(!result){
        result = await this.http.get()...
        cache.set(result)
   }

    return result;
}