避免 Angular 中的嵌套承诺答案

【问题标题】：Avoiding nested promises in Angular避免 Angular 中的嵌套承诺
【发布时间】：2018-10-15 08:58:49
【问题描述】：

我正在使用Eddy's nativescript-secure-storage plugin 在设备存储（NativeScript 应用程序）中存储多个变量。

每个存储值的调用都会返回一个承诺：

this.secureStorage = new SecureStorage();
secureStorage.set({
  key: "foo",
  value: "val1"
}).then(
  function(success) {
    //move on to the next one.
});

存储多个值后，我需要将应用导航到主视图，但需要先确认值已成功存储。

我怎样才能避免嵌套这些调用（这确实有效，但对于很多值来说不会很漂亮）：

this.secureStorage = new SecureStorage();
secureStorage.set({
  key: "foo1",
  value: "val1"
}).then(
  function(success) {
    secureStorage.set({
      key: "foo2",
      value: "val2"
  }).then(
    function(success) {
      secureStorage.set({
        key: "foo3",
        value: "val3"
    }).then(
       function(success) {
         //navigate to home view
    });
  });
});

【问题讨论】：

Promise.all(...)?
@jonrsharpe 啊....like this
@lilbiscuit 正如 jonrsharpe 所说，构建一个 Promise 数组，然后调用 Promise.all(myarray)，这使得 Promise 可以并行运行。
如果您需要知道任何承诺的结果，您可以在此处看到的 NS 应用程序中启用 async/await nativescript.org/blog/…

标签： angular nativescript angular-promise

【解决方案1】：

根据@johnrsharpe：

Promise 
    .all( [
        this.secureStorage.set({
           key: "foo1",
           value: "value1"
        }),
        this.secureStorage.set({
           key: "foo2",
           value: "value2"
        }),
        this.secureStorage.set({
           key: "foo3",
           value: "value3"
        })
    ])
    .then(success => {
        //navigate to home view
    });

【讨论】：

【解决方案2】：

RezaRahmati 的回答很中肯。

另一种方法是将 Promise 转换为 observables。

import { fromPromise } from 'rxjs/observable/fromPromise';
import { mergeMap } from 'rxjs/operators';

const secureStorage = new SecureStorage();
const store = (key, value) => fromPromise(secureStorage.set({key, value}));

这里是顺序存储：

store('foo1', 'value1')
   .pipe(
       mergeMap(() => store('foo2', 'value2')),
       mergeMap(() => store('foo3', 'value3'))
   ).subscribe(
      () =>  {/* Handle success */ }, 
      err => {/* Handle error*/ }
   )

或Promise.all(...)的等价物：

forkJoin(
   store('foo1', 'value1'), 
   store('foo2', 'value2'), 
   store('foo3', 'value3')
).subscribe(
   ([foo1, foo2, foo3])=> { /* Success */ },
   err => { /* Error */ }
)

【讨论】：

【解决方案3】：

您可以使用Promise.all([array of promises]) 或使用 Typescript async/await

既然您将问题标记为 Angular，我假设您使用的是 Typescript 1.7+，那么您可以使用这种方式

async storedata() {

   this.secureStorage = new SecureStorage();

   try {
     await secureStorage.set({
        key: "foo1",
        value: "val1"
     });
     await secureStorage.set({
        key: "foo2",
        value: "val2"
     });
     await secureStorage.set({
        key: "foo3",
        value: "val3"
     });

    //navigate to home view

   } catch(err) {
       console.error(err);
   }
}

【讨论】：