具有 Promise 解析值的 setTimeout 函数作为回调

Question

我有这段代码真的让我很困惑，所以我会尝试将它粘贴在这里并用文字写下我认为它是如何执行的，它可能不正确，所以你可以纠正我。

const wait = function(seconds) {
  return new Promise(function(resolve) {
    setTimeout(resolve, seconds * 1000);
  });
};

wait(1)
  .then(() => {
    console.log(`1 second passed`);
    return wait(1);
  })
  .then(() => {
    console.log(`2 second passed`);
    return wait(1);
  })
  .then(() => {
    console.log(`3 second passed`);
    return wait(1);
  })
  .then(() => {
    console.log(`4 second passed`);
    return wait(1);
  })
  .then(() => console.log(`5 second passed`));

所以让我感到困惑的部分是将'resolve'设置为setTimeout函数内部的回调，我会尝试一步一步地写，如果有错误你可以纠正我。

• 第 1 步：我们正在调用等待函数并将 1 作为秒参数传递
• 第 2 步：在函数内部，我们在其中创建了一个新的 Promise 指定只有在承诺得到解决（履行）时才会发生什么，我们 不在乎被拒绝。
• 第 3 步：在 Promise 构造函数中，我们有 setTimeout 函数和 resolve 作为回调，将在 1 秒传递后调用。
• 第 4 步：一秒钟过去了，现在我们的承诺已经实现，then 方法被触发。由于我们的“解决”是空的，我们不能使用then 方法的参数对吗？但是，仍然会在一秒钟后触发该方法，因此我们可以利用它来登录到“经过 1 秒”的控制台。
• 第 5 步：我们返回新的 Promise，以便我们可以链接方法。

Answer 1

除了一点小问题，你的解释很好：

由于我们的 'resolve' 是空的，我们不能使用 'then' 方法的参数对吗？

可以，只是它的值为undefined。不带参数调用resolve的结果和用undefined调用的结果完全一样：promise的实现值是undefined：

const wait = ms => new Promise(resolve => {
    setTimeout(resolve, ms);
});

wait(200)
.then(result => {
    console.log(`result is: ${result}`);
});

wait(200)
.then((...args) => {
    console.log(`args.length is: ${args.length}`);
});

请注意，即使我们在没有参数的情况下调用 resolve，执行处理程序也始终只使用一个参数来调用。

Answer 2

总体而言，您的解释看起来足够好。只是第 4 步和第 5 步有点错误。

Step: 4 ....由于我们的 'resolve' 是空的，我们不能使用 '.then' 方法的参数 对...

答案是否定的。 你仍然可以.then，数据将是undefined

var wait = function (seconds) {
  return new Promise(function (resolve) {
    setTimeout(resolve, seconds * 1000);
  });
};

wait(1)
  .then(() => {
    console.log(`1 second passed`);
  }).then((data) => { console.log("Result: " + data) });

同时，如果您返回 Promise 甚至任何值，解析下一个.then 仍然是值。

var wait = function (seconds) {
  return new Promise(function (resolve) {
    setTimeout(resolve, seconds * 1000);
  });
};

wait(1)
  .then(() => {
    console.log(`1 second passed`);
    return 999;
  }).then((data) => { console.log(data) });

步骤：5 - 我们正在返回一个新的承诺，以便我们可以链接方法。

实际上，new promise 的值将是下一个.then 链的值。

比如说resolve里面的setTimeout是具体的值，那么发生了什么？

const wait = (expectedValue, seconds) => {
  return new Promise(function (resolve) {
    setTimeout(() => resolve(expectedValue), seconds * 1000);
  });
};

wait(100, 1)
  .then((data) => {
    console.log(`1 second passed, Value = ${data}`);
    return wait(200, 1);
  }).then((data) => {
    console.log(`1 second passed, Value = ${data}`);
  })