为什么 .then() 在 Promise 真正解决之前被触发？ [复制]答案

【问题标题】：Why is .then() fired before promise has actually resolved? [duplicate]为什么 .then() 在 Promise 真正解决之前被触发？ [复制]
【发布时间】：2016-04-15 20:25:40
【问题描述】：

我正在尝试从异步任务返回承诺，以便我可以使用 .then() 调用使它们同步。不幸的是，我遇到了一些真正奇怪的行为。基本上，第三个 then() 在第二个解决之前执行。有人可以解释发生了什么吗？这是我的代码：

function runReleaseLoop() {
  console.log('Starting release loop');
  const themes = ['blue', 'red'];
  return new Promise(resolve => {
    buildReleases(themes, resolve);
  })
}

function buildReleases(themes, onComplete) {
  console.log(themes);
  if (themes.length === 0) {
    onComplete();
  } else {
    const theme = themes.pop();
    Promise.resolve()
      .then(setTheme(theme))
      .then(someDelayedTask(theme))
      .then(buildReleases(themes, onComplete));
  }
}

function setTheme(theme) {
  return new Promise(resolve => {
    console.log(`Setting theme to ${theme}`);
    resolve();
  });
}

function someDelayedTask(theme) {
  console.log(`Starting delayed task related to ${theme}`);
  return new Promise(resolve => {
    setTimeout(() => {
      console.log(`Finished delayed task related to ${theme}`);
      resolve();
    }, 3000)
  });
}

// Run the process
runReleaseLoop()
  .then(() => {
    console.log('Release loop finished')
  });

这是我的控制台输出：

"Starting release loop"
["blue", "red"]
"Setting theme to red"
"Starting delayed task related to red"
["blue"]
"Setting theme to blue"
"Starting delayed task related to blue"
[]
"Release loop finished"
"Finished delayed task related to red"
"Finished delayed task related to blue"

【问题讨论】：

那么，对于带参数的函数，我需要返回一个返回promise的函数吗？
是的，正确（哎呀，删除了第一条评论，哈哈），但您还需要按照返回的承诺等采取行动

标签： javascript es6-promise

【解决方案1】：

您正在同步调用每个函数（setTheme、someDelayedTask 和 buildReleases），然后将它们的返回值（承诺）传递给 then，而不是将函数本身传递给 then：

Promise.resolve()
  .then(setTheme(theme))
  .then(someDelayedTask(theme))
  .then(buildReleases(themes, onComplete));

这是一种解决方案：

Promise.resolve()
  .then(_ => setTheme(theme))
  .then(_ => someDelayedTask(theme))
  .then(_ => buildReleases(themes, onComplete));

这是您的代码经过上述更改后的输出：

Starting release loop
[ 'blue', 'red' ]
Setting theme to red
Starting delayed task related to red
Finished delayed task related to red
[ 'blue' ]
Setting theme to blue
Starting delayed task related to blue
Finished delayed task related to blue
[]
Release loop finished

【讨论】：

你也可以这样做： Promise.resolve() .then(setTheme) .then(someDelayedTask) .then(buildReleases);

【解决方案2】：

第一个问题是，您将 Promise 与回调混合在一起。二是一次性调用所有函数setTheme, someDelayedTask, buildReleases：

function runReleaseLoop() {
  console.log('Starting release loop');
  const themes = ['blue', 'red'];
  return buildReleases(themes);
}

function buildReleases(themes) {
  console.log(themes);
  if (themes.length === 0) {
    return Promise.resolve();
  }

  const theme = themes.pop();
  return setTheme(theme)
    .then(() => someDelayedTask(theme))
    .then(() => buildReleases(themes));
}

function setTheme(theme) {
  console.log(`Setting theme to ${theme}`);
}

function someDelayedTask(theme) {
  console.log(`Starting delayed task related to ${theme}`);
  return new Promise(resolve => {
    setTimeout(() => {
      console.log(`Finished delayed task related to ${theme}`);
      resolve();
    }, 3000)
  });
}

// Run the process
runReleaseLoop()
  .then(() => console.log('Release loop finished'));

【讨论】：