javascript - 为什么我们不在彼此内部链接 promise ？

Question

在一个关于 promise 的 youtube 教程视频中，我发现了以下代码:

let cleanRoom = function() {
  return new Promise((resolve, reject) => {
    resolve();
  });
};

let removeGarbage = function() {
  return new Promise((resolve, reject) => {
    resolve();
  });
};

let winIcecream = function() {
  return new Promise((resolve, reject) => {
    resolve();
  });
};

cleanRoom().then(function(){
  return removeGarbage();
}).then(function() {
  return winIcecream();
}).then(function() {
  console.log('finished');
})

为什么 promise 没有像每个 .then 词都在前一个 promise 之后那样被链接起来？我的意思是，为什么例如 .then 不是紧接在 removeGarbage() 之后，而是在 cleanRoom().then() 之后，如何winIcecream() 是否会在解决 removeGarbage promise 后运行？我还需要键入 return 来声明上面代码中的每个 promise 吗？如果是，我为什么需要这样做？

Answer 1

您最初的问题可以通过重写变量赋值来回答。

我在这里使用箭头函数语法隐式返回新表达式；如果您使用的是常规函数，那么是，如果您想按顺序运行它们，则必须返回新的链式 promise 。

const roomCleanedPromise = cleanRoom();
const roomCleanedAndGarbageTakenOutPromise = roomCleanedPromise.then(() => removeGarbage());
const roomCleanedAndGarbageTakenOutAndIcecreamWonPromise = roomCleanedAndGarbageTakenOutPromise.then(() => winIcecream());
const finishedPromise = roomCleanedAndGarbageTakenOutAndIcecreamWonPromise.then(() => console.log('finished'));

然而，使用更现代的 async/await 语法编写起来更容易 - 您提到的 YouTube 教程可能有点过时了。

async function cleanRoom() {
  console.log('Cleaning room.');
  // this could do other async things or just take a while
  return {room: 'clean'};  // just to demonstrate a return value
}


async function removeGarbage() {
  console.log('Removing garbage.');
  // this could do other async things or just take a while
  return {garbage: 'removed'};
}

// third function elided for brevity

async function doAllTheThings() {
  const roomStatus = await cleanRoom();
  const garbageStatus = await removeGarbage();
  console.log('finished');
}