等到异步调用完成 - Ionic2

Question

我在 Ionic2 中工作，我遇到了这个问题：在我的组件中有 drawPlayer 从 firebase 数据库检索数据的方法。

这是它的代码：

drawPlayer(){
    this.playerData.drawThePlayer().on('value', snapshot => {
      // some stuff
    });
    return this.drawnPlayer;   // returns the player name
}

在 ngOnInit 函数内的同一个文件（组件）中，我需要调用 drawPlayer() 并且我这样做：

ngOnInit(){
let myVar = this.drawPlayer();
console.log("test: "+myVar);
}

如果我检查控制台，我会看到 test: undefined，如果我返回并再次 return 到那个页面，我会看到 test: a correct value。我认为这是因为 drawPlayer() 是一个异步调用，当我执行 console.log 时它还没有 return 编辑结果。

那么，我怎么才能console.log 才drawPlayer() 完成呢？

/******************************************** *********************************/

编辑：（在 httpNick 回答后）

现在我有了这个 drawPlayer() 方法和完整的代码（this.drawnPlayer 是从这些方法中全局定义的）：

drawPlayer(cb){
    this.playerData.drawThePlayer().on('value', snapshot => {
      var data = snapshot.val();
      for (var key in data){
            this.drawnPlayer = String(data[key].lastName);
            console.log("playerName: "+this.drawnPlayer);
      }
    });
    console.log("test: "+this.drawnPlayer);
    cb(this.drawnPlayer);   // returns the player name
}

ngOnInit() 是这样的：

this.drawPlayer(function(valueFromDrawPlayer) {
    console.log("callback result: "+valueFromDrawPlayer);
});
console.log("after the callback");

当我运行应用程序时，这是我在浏览器控制台中看到的：

test: undefined
callback result: undefined
after the callback
EXCEPTION: Error: Uncaught (in promise): TypeError: Cannot read property '0' of undefined
playerName: John

但我希望看到这个：

playerName: John
test: John
callback result: John
after the callback

Answer 1

我不确定 this.drawnPlayer 来自哪里，但是如果你将回调函数传递给 drawPlayer 你可以在异步代码完成后调用它运行能够记录 return 值。

drawPlayer(cb){
    this.playerData.drawThePlayer().on('value', snapshot => {
      // some stuff
    });
    cb(this.drawnPlayer);   // returns the player name
}
ngOnInit(){
    drawPlayer((x) => { console.log(x) });
}

最后一行也可以重写为：

drawPlayer(function(valueFromDrawPlayer) {
    console.log(valueFromDrawPlayer);
});

查看完整代码后编辑：

drawPlayer(cb){
    this.playerData.drawThePlayer().on('value', snapshot => {
      var data = snapshot.val();
      for (var key in data){
            this.drawnPlayer = String(data[key].lastName);
            console.log("playerName: "+this.drawnPlayer);
            cb(this.drawnPlayer);   // returns the player name
      }
    });
}

Answer 2

尝试围绕异步调用制作一个同步包装器。通常您不想这样做，因为它会阻塞整个线程池。如果必须使用等待来阻止异步 return 方法。它首先违背了使用异步的目的。

   public static whatever CallAndWaitAsync()
   {
       task.Wait(); // Block thread until completed
       var result = task.Result;
       return result;
   }

等到异步调用完成 - Ionic2

Wait until async call has finished - Ionic2

javascript

typescript

ionic2

angular