Angular中避免嵌套Promise：NativeScript安全存储多变量后导航问题

Great question! Dealing with nested Promises (often called "callback hell") is a common frustration, but there are two straightforward ways to avoid it while ensuring all your storage operations complete successfully before navigating home.

方法1：使用Promise.all并行存储（推荐，效率更高） #

If your storage operations don't depend on each other (i.e., you don't need one to finish before starting another), Promise.all is perfect—it waits for all Promises in an array to resolve before proceeding, and only fails if any single operation fails.

Here's how to implement it:

// 初始化SecureStorage实例
this.secureStorage = new SecureStorage();

// 先定义所有需要存储的键值对
const itemsToStore = [
  { key: "foo", value: "val1" },
  { key: "bar", value: "val2" },
  { key: "user_id", value: "12345" }
];

// 将每个存储操作转换为Promise，存入数组
const storageTasks = itemsToStore.map(item => this.secureStorage.set(item));

// 等待所有任务完成
Promise.all(storageTasks)
  .then(() => {
    // 所有存储操作成功！导航到首页
    this.$navigateTo(HomePage); // 替换成你实际的导航逻辑，比如router.navigate("/home")
  })
  .catch(error => {
    // 处理任意一个存储失败的情况
    console.error("One or more storage operations failed:", error);
    // 这里可以添加错误提示给用户，比如显示Toast
  });

方法2：使用async/await串行存储（更直观，适合有顺序依赖的场景） #

If you need to run storage operations one after another (e.g., a later value depends on an earlier one being stored), async/await makes your asynchronous code look and behave like synchronous code, eliminating nested then calls entirely.

Example implementation:

// 定义一个异步函数来处理存储和导航
async function saveDataAndNavigate() {
  this.secureStorage = new SecureStorage();

  try {
    // 依次执行每个存储操作，前一个完成后才会执行下一个
    await this.secureStorage.set({ key: "foo", value: "val1" });
    await this.secureStorage.set({ key: "bar", value: "val2" });
    await this.secureStorage.set({ key: "user_id", value: "12345" });

    // 所有存储成功后，导航到首页
    this.$navigateTo(HomePage);
  } catch (error) {
    // 捕获任何一个存储操作的失败
    console.error("Storage failed:", error);
  }
}

// 调用这个函数（注意如果在组件中，确保this指向正确）
saveDataAndNavigate.call(this);

关键区别 #

• Promise.all: Runs all storage operations at the same time (parallel), which is faster for independent tasks.
• Async/Await: Runs operations one after another (sequential). Use this only if you have a specific reason to order the storage operations.

额外注意事项 #

• Always include a catch block to handle failures—if even one storage operation fails, you don't want to navigate away without letting the user know.
• Adjust the navigation code to match your NativeScript setup (e.g., if using Angular, you might use this.router.navigate(["/home"]) instead of $navigateTo).

内容的提问来源于stack exchange，提问作者lilbiscuit