如何從具有離子存儲的 angular 服務而不是 Promise 獲取 promise 的結果<any>作為回應</any>

Question

我將Ionic Storage用於本地存儲目的。 為了使用存儲，我創建了service ，其中我有 getter 和 setter 存儲方法。

我想檢查應用程序的負載，是否有任何值在存儲中可用，如果值在存儲中不可用，而不是只想進行實際數據調用並將設置為存儲，但下次病房想從存儲而不是實際獲取數據。

現在的問題是當我的組件被加載時，我正在調用服務的storage.get方法，這需要時間，並且因為該組件的屬性沒有設置為實際存儲的正確值。

此外，用於從服務返回字符串值的方法不允許在沒有最終返回語句的情況下編寫方法，如下面的代碼中所述[現在我從 Promise 添加了兩個返回語句，這對我來說似乎不是正確的設計，但沒有我收到編譯錯誤] ，並且由於 Promise 從存儲獲取響應所花費的時間，兩個返回語句都在不同的時間間隔執行，這會導致存儲的實際響應過度疲勞。

我不確定如何從 promise 管理這種情況，因為默認情況下離子存儲返回 Promise。

 getDefaultLanguage(): string {

     this.storage.get('defaultLanguage').then((res) => {
       return this.defaultLanguage = res || 'en';
     });
     return this.defaultLanguage;
   }

請讓我知道如何在組件中保持執行，直到我從 Promise 的上述服務調用中得到響應，因此核心組件的邏輯可以正常工作，還想要正確的方法來實現服務層，我希望結果是來自string而不是promise<any> 。

Answer 1

最簡單的方法是將其轉換為 promise：

 getDefaultLanguage(): Promise <string> { return new Promise( (resolve, reject) => { this.storage.get('defaultLanguage').then((res) => { resolve(res || 'en'); }); }); }

您當前的方法不起作用的原因是因為this.storage.get是異步的。 return this.defaultLanguage將無法及時完成。 將您的get呼叫包裝在另一個Promise中是一種方法。

Answer 2

您可以使用async等待 promise 得到解決：

async getDefaultLanguage(): Promise<string> {
    const res = await this.storage.get('defaultLanguage');
    this.defaultLanguage = res || 'en';

    return this.defaultLanguage;
}

請記住，使用此解決方案getDefaultLanguage現在必須異步調用

Answer 3

感謝@Nenroz 和@mwilson 的兩個回答。

它幫助我了解 Promise 的實際工作原理，我寧願尋找直接從 Promise 返回我的字符串值的單一服務方法，並且還想等待進一步的代碼執行直到。

由於前端框架會對自身的變化做出反應，因此與其實際要求這個問題等到從 Promise 獲得價值，我會找到一種方法來設法保持 UI，直到 Promise 得到如下解決。 （無需等待進一步的代碼執行）

在app.component.ts的constructor中添加了方法InitStorage()

 InitStorage() {
     const defLanguage = this.storageService.getDefaultLanguage();
 }

StorageService.ts的返回Promise<string>的方法如下

 getDefaultLanguage(): Promise<string> {
     return this.storage.get('defaultLanguage');
 }

現在等到從上述方法中獲取值並停止進一步的代碼執行，直到 promise 得到解決，在ngOnInit的page.ts中添加了它的實現

 ngOnInit() {
      this.defaultLanguage = this.storageService.defaultLanguage;
 }

並在page.html文件中添加了它的值，因此一旦變量 html 中的值可用，就可以由框架刷新/設置，以前我無法在 HTML (previously Value was getting sated after Page was getting loaded, and UI was not getting updated)

 <ion-radio-group [value]="defaultLanguage" />

我不確定這個正確的service架構和Promise中的Angular是否正確，但這就是我設法在service中獲得Storage值並能夠在變量中使用正確的存儲值更新 UI 的方法。

期待對架構改進的任何進一步建議，並感謝所有寶貴的建議。