StorageService 返回回调 Ionic2/Angular2

Question

我对存储的异步调用有很多问题，在我的 console.log 上它显示第一行 50，然后是第 20 行...我想避免这种情况。

我有一项服务，我调用了我的存储，但所有调用都返回一个 Promise 并且在我调用它们的任何地方我都必须执行.then().catch() 所以它给我带来了问题......我怎样才能让方法返回一个回调？所以我可以调用我的方法而不考虑异步？

我的StorageService 的一个例子是

import { Injectable } from '@angular/core';
import { Http, Headers, Response } from '@angular/http';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/toPromise';

//Storage
import { Storage } from '@ionic/storage';


@Injectable()
export class StorageServiceProvider {

    constructor(public http: Http, private storage: Storage) {
    }

    saveUser(user) {
        if (user== null) return;
        var userToSave= { "id": user["id"], "info": user["info"] };
        this.storage.set('userStored', JSON.stringify(userToSave));
    }
    //I'd like to do it like this, but I can't because Asyncronous so I have to do it like this.storage.get('userStored');
    getUserId() {
        this.storage.get('userStored').then((idUser) => {
            return JSON.parse(idUser["id"]);
        })
            .catch((err: any) => {
                console.log("Err");

            });

    }
    //I'm testing this now
    getUserInfo() {
        return this.storage.get("userStored");

    }
    //RestsLocalStorage
    resetLocalStorage() {
        this.storage.clear();
    }

}

例如，我想有一个方法返回给我id 和其他info，但只知道如何获得object...

来自组件的调用是这样的……

this.storageServiceProvider.getUserInfo().then((information) => {
    var infoStored = JSON.parse(information)["info"];
    console.log(infoStored );
    //if..else
  })
    .catch((err: any) => {
      console.log("Error");

    });

 }

在其他方法中，我需要同时调用它们...并且我想避免 2 然后捕获...我想做这样的事情：

let userInfo= this.storageServiceProvider.getUserInfo;
let userId= this.storageServiceProvider.getUserId;

我有一个旧项目 (Ionic1/Angluar1)，我做了这样的事情：

angular.module('app.storageServices', [])
.factory ("storageService", ['$localStorage',function ($localStorage) {

    var saveUser = function (user) {      
      if(user==null) return;
      $localStorage.userId=user.id;
      $localStorage.userInfo=user.info;
    };

    var getIdUser = function () {
      if($localStorage.userId!=null){
        return $localStorage.userId;    
      }
      return null;
    };
    var getInfoUser = function () {
      if($localStorage.info!=null){     
        return $localStorage.info;  
      }
      return null;
    };

    return {
        saveUser: saveUser,
        getIdUser: getIdUser,
        getInfoUser: getInfoUser       
    };
}])

而我只是在调用这样的方法：

this.myTestFunction=function(success,error){

    var userId=storageService.getUserId();
    if(userId!=null && userId!=""){
        var userInfo=storageService.getUserInfo();
        //if..else 
    }else{
        console.log("error");           
    }       
}

那么我是否可以拥有类似于我的旧项目的 >=ionic2 和 >=Angular2 的东西？

我错过了什么？

Answer 1

使用异步代码时，您无法创建同步调用。异步代码的关键在于您不会立即获得结果，因此您必须等到它可用。没有办法解决这个问题。

在您的示例中，我不明白为什么您有两种不同的获取方法，一种用于userId，另一种用于userInfo。因为这两个值都存储在同一个位置，所以您只需使用getUserInfo()，然后访问id、info 或任何您需要的属性。

但是假设您的代码只是一个示例，您确实需要多个 get 函数。你有两个选择：

在您的StorageServiceProvider 中，您返回承诺。

getUserId() {
    return this.storage.get('userIdStored');
}

getUserInfo() {
    return this.storage.get("userInfoStored");
}

然后您可以使用Promise.all() 等待所有承诺立即解决。

Promise.all([this.storageServiceProvider.getUserId(), this.storageServiceProvider.getUserInfo()])
.then(values => {
  console.log(values); // [userId, userInfo]
});

另一种选择是使用新的async/await 语法：

async function() {
  let userId = await this.storageServiceProvider.getUserId();
  let userInfo = await this.storageServiceProvider.getUserInfo()
  // Note: This is synchronous, so the 2 Promises are not executed in parallel. Read more here: https://medium.com/@bluepnume/learn-about-promises-before-you-start-using-async-await-eb148164a9c8
}

编辑：

如果您只获取用户 ID，则必须创建自己的承诺并使用您需要的值解决：

getUserId() {
  return new Promise((resolve, reject) => {
    this.storage.get('userInfo')
      .then(user => {
        resolve(user.id);
      })
      .catch(reject);
  });
}

getUserId() 现在将解析一个使用 userId 解析的 Promise，因此您可以像这样使用它：

this.storageServiceProvider.getUserId().then(id => {
  console.log(id); // UserID
})

或

async myFunction() {
  let userId = await this.storageServiceProvider.getUserId();
  console.log(userId);
}