在渲染页面之前等待待处理的 Promise

Question

我目前正在为 node.js 中的 Twitch-Community 开发一个 web 项目。在呈现页面之前，我正在使用 Twitch API 接收个人资料图片并将它们与其他信息一起添加到对象数组中。不幸的是，当页面呈现时，我只会得到一个关于个人资料图片 URL 的未决承诺。在页面呈现近一毫秒后，我得到了关于 PB-Links 的控制台日志，所以它运行得很快，所以在我看来，ajax 没有意义。在脚本继续渲染页面之前是否有可能等到承诺加载完毕？

提前谢谢你

async function getStreamersPB(streamerName){
  var streamer = await twitch.getUsers(streamerName);
  var streamerPBURL = await streamer.data[0].profile_image_url;


  console.log(streamerPBURL);
}

...

router.get('/', (req, res) => {

  var streamer = [];
    con.query("SELECT * FROM xxx",  function (err, result) {
    if (err) {
      console.log(err);
    }
    if (result.length !== 0){
      for (let i = 0; i < result.length; i++) {
        let streamObj = {
          "id": result[i].id,
          "name": result[i].name,
          "website": result[i].website.toLowerCase(),
          "status": result[i].status,
          "rang": result[i].rang,
          "userPB": getStreamersPB(result[i].name)
        }
        console.log(streamObj);
        streamer.push(streamObj);
    }}});

    con.query("SELECT * FROM xxx WHERE xxx = '" + xxx + "'", function (err, result) {
    if (err) {
      console.log(err);
    } if(result.length === 1){
    res.render('home', {
      message: result[0].twitchName,
      userID: result[0].id,
      streamer: streamer
    });

...

这是我的控制台日志：

{
  id: 1,
  name: 'xxx',
  website: 'xxx',
  status: 0,
  rang: 1,
  userPB: Promise { <pending> }
}
https://static-cdn.jtvnw.net/...xxx

Answer 1

由于您收到 Dylan 的回答错误，请将 async 添加到第一个 com.query 函数。

router.get('/', async (req, res) => {

  var streamer = [];
    con.query("SELECT * FROM xxx", async function (err, result) {
    if (err) {
      console.log(err);
    }
    if (result.length !== 0){
      for (let i = 0; i < result.length; i++) {
        
        let streamObj = {
          "id": result[i].id,
          "name": result[i].name,
          "website": result[i].website.toLowerCase(),
          "status": result[i].status,
          "rang": result[i].rang
        }

        // getStreamersPB is an asynchronous method which you must await.
        streamObj.userPB = await getStreamersPB(result[i].name);

        console.log(streamObj);
        streamer.push(streamObj);
    }}});

    con.query("SELECT * FROM xxx WHERE xxx = '" + xxx + "'", function (err, result) {
    if (err) {
      console.log(err);
    } if(result.length === 1){
    res.render('home', {
      message: result[0].twitchName,
      userID: result[0].id,
      streamer: streamer
    });

}

Answer 2

正如 slebetman 所说，您必须等待异步函数调用，否则您将向您的客户发送待处理的承诺。这是修改后的代码。

router.get('/', (req, res) => {

  var streamer = [];

  // This function has been marked as async so we can use await in it.
  con.query("SELECT * FROM xxx", async function (err, result) {

    if (err) {
      console.log(err);
    }

    if (result.length !== 0) {
      for (let i = 0; i < result.length; i++) {

        let streamObj = {
          "id": result[i].id,
          "name": result[i].name,
          "website": result[i].website.toLowerCase(),
          "status": result[i].status,
          "rang": result[i].rang
        }

        // getStreamersPB is an asynchronous method which you must await.
        streamObj.userPB = await getStreamersPB(result[i].name);

        console.log(streamObj);
        streamer.push(streamObj);
      }
    }

    // I moved this query to inside the callback for the first query
    // to ensure this query happens after the first one. Originally,
    // both `con.query` calls were being invoked at the same time, so
    // there's no garuntee in what order they execute.
    con.query("SELECT * FROM xxx WHERE xxx = '" + xxx + "'", function (err, result) {
      if (err) {
        console.log(err);
      } if (result.length === 1) {
        res.render('home', {
          message: result[0].twitchName,
          userID: result[0].id,
          streamer: streamer
        });
      }
    });

  });

});

Answer 3

我把它修好了！我忘了在我的函数中添加一个 return 语句！

非常感谢大家的回答和帮助！！！

Answer 4

您可以先使用 css 隐藏页面，然后当您的个人资料图片加载后，使用 javascript 更改 css 并显示页面。