离子本机存储：storage.getItem() 不起作用

Question

我正在使用离子本机存储来存储一些数据。当我使用 setItem() 和 getItem() 存储和检索数据时，它工作得很好。但是当我在 then 块中分配 getItem() 检索到的值时。它在块外不起作用。

showDetails(name: string) {
    this.stg.getItem(name).then(data => {
      console.log(data);
      
      this.pathName = data.name;
      this.type = data.type;
      this.positions = JSON.parse(data.positions);
      
      console.log(this.positions);
      
    });

    console.log(this.pathName + " " + this.type);
  }

当我在控制台中打印数据时，我得到了结果，当我在 then 块中打印单个值时，我也得到了结果，但最后一个 console.log 向我显示未定义未定义。

Answer 1

看起来好像 getItem returns 一个 Promise 可以在 documentation 中看到。这意味着 this.pathName 只会在您提供给 then 的回调中设置。如果这是异步的，那么当你的未定义行是运行时，then 回调还没有被调用，因此没有设置任何值。这是异步编程的陷阱之一。

更好的方法是将所有逻辑放在回调中：

showDetails(name: string) {
    // get item could be async so do not assume your callback will be run immediately
    this.stg.getItem(name).then(data => {
      console.log(data);

      this.pathName = data.name;
      this.type = data.type;
      this.positions = JSON.parse(data.positions);

      console.log(this.positions);

      // values now been set
      console.log(this.pathName + " " + this.type);
    });

    // at this point no values have been set as the callback has not been called
    console.log(this.pathName + " " + this.type); // so this line is undefined
  }

离子本机存储：storage.getItem() 不起作用

Ionic native storage : storage.getItem() does not work

javascript

typescript

ionic-framework

cordova-nativestorage

angular