代码之家 › 专栏 › 技术社区 › BLDD

异步axios不使用NODEJS运行promise

axios promise vue.js node.js javascript

-3

BLDD · 技术社区 · 8 年前

我正在开发一个多人游戏 vue 在客户端和 nojejs公司 作为游戏服务器(我使用 vue-sockets.io 通信客户端和服务器)。当我在节点端创建游戏实例时,它将具有平铺和隐藏(两个图像阵列都来自api)。对于axios,问题是创建的游戏在运行axios之前会返回给客户端。因此,客户端将获得没有图像的游戏。

createGame(playerName, socketID, boardSize) {
    this.contadorID = this.contadorID+1;

        var game = new MemoryGame(this.contadorID, playerName, boardSize);

        new Promise(function(resolve, reject) {
            console.log("a");
            game.getTiles().then(response=>{
                console.log("getTiles");
        game.tiles = game.getRandomNPieces(response.data.data, game.board.length/2);
                console.log(game.tiles);
      }).catch(function (error) {
        console.log(error);
      });
            console.log('=>' + game.tiles);
        }).then(function(result) { // (***)
            console.log("b");
          game.getHidden().then(response=>{
        game.hidden = game.getRandomHidden(response.data.data);
      }).catch(function (error) {
        console.log(error);
      });
        }).catch(function (error) {
            console.log(error);
        });
    game.player1SocketID = socketID;
    this.games.set(game.gameID, game);
    return game;
}

Print with logs

该程序从未到达第二个axios调用。游戏列表日志来自返回给用户的游戏。

客户端1中的游戏实例(创建游戏的人): Game instance in client 1 (who created the game)

客户端2中的游戏实例(游戏在大厅中,并且已经有了平铺): Game instance in client 2 (the game is in lobby and already have the tiles)

1 回复 | 直到 8 年前

1

jfriend00 8 年前

自从 createGame() 似乎依赖于一些异步操作来正确初始化游戏,您不能仅从同步返回已完成的游戏对象 createGame() . 正如你已经观察到的, createGame() 将在任何异步操作完成之前返回游戏对象。因此,相反,您需要做的是返回一个承诺,其解析值是游戏对象,然后您需要将所有异步操作正确地链接在一起,以便在游戏对象完成时解析您的主要承诺。以下是一种构造方法:

createGame(playerName, socketID, boardSize) {
    this.contadorID = this.contadorID+1;

    var game = new MemoryGame(this.contadorID, playerName, boardSize);

    console.log("a");
    return game.getTiles().then(response=> {
        console.log("getTiles");
        game.tiles = game.getRandomNPieces(response.data.data, game.board.length/2);
        console.log(game.tiles);
        console.log('=>' + game.tiles);
        console.log("b");
        // return nested promise so it chains into main promise chain
        return game.getHidden().then(response=>{
            game.hidden = game.getRandomHidden(response.data.data);
        });
    }).then(() => {
        // finish initializing game object and 
        // make it be the resolved value of the returned promise
        game.player1SocketID = socketID;
        this.games.set(game.gameID, game);
        return game;
    }).catch(function (error) {
        // log error and rethrow so promise stays rejected
        // this will log for any of our rejected promises since they are chained
        console.log(error);
        throw error;
    });
}

而且,这种变化 createGame() 为了回报承诺,你必须改变使用承诺的方式:

someObj.createGame(...).then(game => {
    // game object is ready to use here
}).catch(err => {
    // error creating game object
});