Ionic3中storage.get外部取值为undefined的问题求助

这是个典型的异步操作执行顺序问题，很常见，我来帮你理清楚原因和解决办法：

问题根源 #

this.storage.get('user')是一个异步的Promise操作——它会在后台读取存储的数据，不会暂停后续代码的执行。你写的console.log(this.username)是同步代码，会在storage.get()的回调函数执行之前就运行，这时候this.username还没被赋值，所以自然输出undefined。

解决方案 #

这里有几种常用的处理方式，你可以根据自己的代码习惯选择：

1. 把依赖变量的逻辑放到回调内部

最直接的方式就是把所有需要用到this.username的代码都放进then回调里，确保变量赋值完成后再执行：

username: any;

this.storage.get('user').then((value) => {
  this.username = value;
  console.log(this.username); // 这里能正确输出存储的值
  // 比如渲染页面、调用其他依赖username的方法，都可以放在这里
});

2. 使用async/await语法（推荐，代码更简洁）

如果你的代码所在的函数允许使用async修饰符（比如页面的生命周期钩子函数，像ionViewDidLoad），可以用async/await把异步代码写成同步的风格：

async ionViewDidLoad() {
  // await会等待storage.get()的Promise完成，再继续执行下面的代码
  this.username = await this.storage.get('user');
  console.log(this.username); // 这里能正确获取到值
  // 后续所有依赖username的逻辑都可以直接写在这里
}

async/await是Promise的语法糖，本质还是异步，但代码结构更清晰，避免回调嵌套。

3. 链式调用Promise

如果有多个异步操作需要顺序执行，可以用then的链式调用，确保前一个异步完成后再执行下一个：

this.storage.get('user')
  .then((value) => {
    this.username = value;
  })
  .then(() => {
    console.log(this.username); // 这里也能正确读取到赋值后的变量
    // 后续逻辑放在这个then里
  });

关键提醒 #

Ionic Storage的所有操作（get/set/remove等）都是异步的，永远不要在同步代码里直接去获取还没完成异步赋值的变量——一定要等异步操作完成后，再处理依赖这些变量的逻辑。

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