Promise 没有像我期望的那样表现

Question

我使用 Express 进行路由，使用 Sequelize 进行数据库管理。

app.get('/api/users/:username', (req, res) => {
  let username = req.params.username;
  findChattersPerRole()
    .then(chattersPerRole => {
      console.log('instakbot should\'ve been added by now...');
    });
});

函数 findChattersPerRole 将每个用户的用户名和角色作为另一个对象返回一个对象。

const findChattersPerRole = () => {
  return fetch('https://tmi.twitch.tv/group/user/instak/chatters')
    .then(parseJSON)
    .then(r => {
      let chatters = r.chatters;
      let chattersPerRole = Object.keys(chatters).map(role => {
        return chatters[role].map(username => {
          console.log('findOrCreateViewer will be executed after this');
          findOrCreateViewer(username, role);
          return {
            username: username,
            role: role
          };
        });
      });
      return Promise.resolve(flattenDeep(chattersPerRole));
    }).catch(err => {
      console.log(`Error in fetch: ${err}`);
    });
};

问题是，在我的路由中，我希望console.log('instakbot should\'ve been added by now...'); 在我的查看器插入数据库后执行，因为在我的函数 findChattersPerRole 中，我已经使用函数 findOrCreateViewer 插入了它们。我希望这会发生，因为在我的路线中，当 findChattersPerRole() 解决时，我会编写 console.log...

const findOrCreateViewer = (username, role) => {

  return Viewer.findOrCreate({
    where: {
      username
    },
    defaults: {
      instakluiten: 5,
      role
    }
  }).spread((unit, created) => {
    console.log('unit is: ', unit.dataValues.username);
    if(created){
      return `created is ${created}`;
    }else{
      return unit;
    }
  });

};

但是，在我的终端中，您可以看到事情并非如此......为什么我的承诺没有在预期的时间执行？ Screenshot of my terminal

Answer 1

findOrCreateViewer(username, role); 之后的return {username: ...} 发生在函数被调用之后并且之前任何数据被插入之后。这也意味着return Promise.resolve(flattenDeep(chattersPerRole)); 在插入任何数据之前发生，等等。

你说findOrCreateViewer返回了一个promise，所以你需要等到这个promise被解决（即等到数据插入之后）才能继续做其他事情。

您希望 chattersPerRole 成为一组（数组）承诺，并且仅在所有承诺解决后继续。

Promise.all 很容易做到这一点：

const findChattersPerRole = () => {
  return fetch('https://tmi.twitch.tv/group/user/instak/chatters')
    .then(parseJSON)
    .then(r => {
      let chatters = r.chatters;
      let chattersPerRole = Object.keys(chatters).map(
        role => chatters[role].map(username => {
          console.log('findOrCreateViewer will be executed after this');
          return findOrCreateViewer(username, role).then(
            () => ({username, role})
          );
        });
      );
      return Promise.all(flattenDeep(chattersPerRole));
    }).catch(err => {
      console.log(`Error in fetch: ${err}`);
    });
};

现在findChattersPerRole 返回的promise 将在findOrCreateViewer 返回的所有promise 都解决后 解决。

Answer 2

承诺没有魔法。返回一个promise并不意味着调用函数会阻塞，而是你可以轻松地链接回调来对结果做一些事情。您需要使用

function findChattersPerRole() {
  return fetch('https://tmi.twitch.tv/group/user/instak/chatters')
    .then(parseJSON)
    .then(r => {
      let chatters = r.chatters;
      let chattersPerRole = Object.keys(chatters).map(role => {
        return chatters[role].map(username => {
          console.log('findOrCreateViewer will be executed after this');
          return findOrCreateViewer(username, role).then(() => {
//        ^^^^^^                                   ^^^^^
            return {
              username: username,
              role: role
            };
          });
        });
      });
      return Promise.all(flattenDeep(chattersPerRole));
//                   ^^^ get a promise for an array of results from an array of promises
    }).catch(err => {
      console.log(`Error in fetch: ${err}`);
    });
}