在JavaScript中实现Promise链式调用时遇到意外输出

Question

任务：

如果Mike能够打扫房间，那么他去踢足球。在足球比赛中，如果他进球了，作为奖励他有机会去参观音乐会。如果他没有进球，那么他清理他的狗。如果他无法打扫房间，那么他洗衣服。如果他也不能完成洗衣，那么他必须清理他的狗。但如果他能完成洗衣，那么他去看音乐会。

解决方案：

const cleanRoom = (resolve, reject) => {
    let num = Math.random();
    if (num >= .5) { 
      resolve(num); //房间已打扫
    } else {
      reject(new Error(num)); //房间未打扫
    }
  }
const roomCleaningPromise = new Promise(cleanRoom);

roomCleaningPromise.then(function goFootballAfterCleaning(resolveValue) {
  console.log(`已打扫房间，现在去踢足球：${resolveValue}`);
  return new Promise(function makeGoal(resolve, reject) {
    let number = Math.random();
    if (number >= .5) { //去音乐会
      resolve(number);
    } else {
      reject(number); //清理狗
    }
  }) 
}).then(function goConcertAfterGoal(resolveValue) {
  console.log(`已打扫房间，去踢足球并进球了！现在去音乐演唱会：${resolveValue}`);
}).catch(function cleanDogAfterlosing(errorValue) {
  console.log(`已打扫房间，去踢足球但没进球，所以清理狗：${errorValue}`);
})
  
roomCleaningPromise.catch(function goLaundaryAfterNoCleaning(errorValue) {
  console.log(`未打扫房间，所以去洗衣服：${errorValue}`);
  return new Promise(function doLaundary(resolve, reject) {
    let number_2 = Math.random();
    if (number_2 >= .5) { //去音乐会
      resolve(number_2);
    } else {
      reject(number_2); //清理狗
    }
  })
}).then(function goConcertAfterLaundary(resolveValue) {
  console.log(`未打扫房间，去洗衣服并完成了，现在去音乐演唱会：${resolveValue}`);
}).catch(function cleanDogAfterNoLaundary(errorValue){
  console.log(`未打扫房间，去洗衣服但未完成，所以清理狗：${errorValue}`);
})

输出：

未打扫房间，所以去洗衣服：Error: 0.10282616920143206
已打扫房间，去踢足球但没进球，所以清理狗：Error: 0.10282616920143206
未打扫房间，去洗衣服但未完成，所以清理狗：0.3140749736813231

疑问：

现在我的问题是，如果房间未打扫，为什么打印出“已打扫房间……”？如果初始Promise被拒绝，控制权应该转到代码的第二个.catch()，然后如果第二个Promise也被拒绝，控制权应该只转到最后一个.catch()。为什么没有发生这种情况？

期望输出：

可能的一个期望输出是这样的：

未打扫房间，所以去洗衣服：Error: 0.10282616920143206
未打扫房间，去洗衣服但未完成，所以清理狗：0.3140749736813231

推断：

推断1：我现在明白，如果一个.then()和一个.catch()附加到同一个Promise（p1），即使它们都使用“new”来创建Promise，它们实际上指向相同的Promise实例。因此在我的代码中，当goLaundryAfterNoCleaning .catch()块返回一个被拒绝的Promise时，它找到的是上面而不是下面的第一个.catch()，因为从技术上讲，如果这个被拒绝的Promise与由goFootballAfterCleaning .then()返回的Promise是同一个实例，那么第一个.catch()应该是上面的那个。

疑问：

为什么会这样？为什么由.then()和.catch()返回的Promise都指向同一个实例？
如何修改我的代码以按照预期的方式完成任务？

推断2：在goLaundryAfterNoCleaning .catch()返回一个被拒绝的Promise后，控制权转移到第一个.catch()（C1）块。现在，这个.catch()（C1）也“隐式”地返回了一个被拒绝的Promise，因此代码流继续到链中的下一个.catch()（代码的最后一.catch()），尽管根据预期任务，它本应在运行C1后停止。

疑问：

如何解决这个问题并在此处停止代码流程？

参考：

上述任务和代码基于Praveen Gaur在Medium上的文章《JavaScript Promises》

BENY · Answer

如果你有一个被拒绝的Promise，并且在其后面链式调用了单参数的then方法，这些then方法返回的Promise会以与原始Promise相同的方式被拒绝。这是因为then方法定义中的规则：

如果onFulfilled不是一个函数，它会被内部替换为一个恒等函数（(x) => x），简单地将成功值传递下去。

如果onRejected不是一个函数，它会被内部替换为一个抛出器函数（(x) => { throw x; }），将接收到的拒绝原因抛出。

这里，你的cleanRoom被拒绝；你连续在其后调用了两个没有提供onRejected处理函数的then方法，所以当你到达catch语句时，Promise仍然保持其最初的拒绝状态。你所阅读的文章并没有充分描述这种情况。

const roomCleaningPromise = Promise.reject(new Error("original failure"));

roomCleaningPromise.then(function goFootballAfterCleaning(resolveValue) {
  console.log("this doesn't run, roomCleaningPromise failed");
}).then(function goConcertAfterGoal(resolveValue) {
  console.log("this doesn't run, roomCleaningPromise failed");
}).catch(function cleanDogAfterLosing(errorValue) {
  console.log(`Catch #1, value: ${errorValue}`);
})
  
roomCleaningPromise.catch(function goLaundryAfterNoCleaning(errorValue) {
  console.log(`Catch #2, value: ${errorValue}`);
  return new Promise(function doLaundry(resolve, reject) {
    let number_2 = Math.random();
    if (number_2 >= .5) { //go to concert
      resolve(number_2);
    } else {
      reject(number_2); //dog cleaning
    }
  })
}).then(function goConcertAfterLaundary(resolveValue) {
  console.log(`Laundry + concert: ${resolveValue}`);
}).catch(function cleanDogAfterNoLaundary(errorValue){
  console.log(`Laundry + dog: ${errorValue}`);
})

错误传播的能力应当被视为Promise的一个特性，它以异步方式近似于try/catch的使用：

function main() {
  try {
    a();
  } catch(e) {
    console.log(e);
  }
}

function a() {
  b();
  console.log("this doesn't happen because b throws");
}

function b() {
  throw new Error("this is logged by main despite not being handled in a");
}

tvanfosson · Answer

这是一个很好的学术性问题，但在现代（ES2017之后）程序中，应避免使用.then()和.catch()，转而使用async/await和try/catch，因为它们使得异步JS能够以与同步代码一致的直接风格表达出来。

此外，错误应该用于表示错误——用户未完成任务的情况更适合用false来处理，而非Error，后者通常用于表示意外行为。

如果你的目标是最简单地实现程序以便自己和他人理解，这个答案可能是最佳选择。然而，如果你的目标是专门使用ES2017之前的Promise处理技术，你可能会更倾向于其他答案。

ES2017解决方案（同时使用TypeScript和顶级`await`）

首先，我们定义返回Promise的函数。

const log = console.log;

const getRandomResult = (): boolean => {
  return Math.random() >= 0.5;
};

const getRandomPromiseBoolean = (): Promise => {
  return new Promise((resolve, reject) => {
    const result = getRandomResult();
    if (result) {
      resolve(true);
      return;
    }
    resolve(false);
  });
};

const getPromiseOfTrue = (): Promise => {
  return new Promise((resolve, reject) => {
    resolve(true);
  });
};

const cleanRoom = (): Promise => {
  return getRandomPromiseBoolean();
};

const playFootball = (): Promise => {
  return getRandomPromiseBoolean();
};

const doLaundry = (): Promise => {
  return getRandomPromiseBoolean();
};

const goToConcert = (): Promise => {
  // 在任务中，音乐会总是成功。
  return getPromiseOfTrue();
};

const cleanDog = (): Promise => {
  // 在任务中，狗总是被清理。
  return getPromiseOfTrue();
};

然后，程序的逻辑变得极其简单，与你的描述非常接近：

const isRoomCleaned = await cleanRoom();
if (isRoomCleaned) {
  log(`Room cleaned, going to play football`);
  const isGoalMade = await playFootball();
  if (isGoalMade) {
    log(`Goal made, going to concert`);
    await goToConcert();
    log(`Concert visited`);
  } else {
    log(`Goal not made, cleaning dog`);
    await cleanDog();
    log(`Dog cleaned`);
  }
} else {
  log(`Room not cleaned, doing laundry`);
  const isLaundryDone = await doLaundry();

  if (isLaundryDone) {
    log(`Laundry done, going to concert`);
    await goToConcert();
    log(`Concert visited`);
  } else {
    log(`Laundry not done, cleaning dog`);
    await cleanDog();
    log(`Dog cleaned`);
  }
}

// 为linting添加
export {};

将这些代码片段粘贴到名为runme.ts的文件中，并使用以下命令运行：

npx esrun runme.ts

Code-Apprentice · Answer

看起来您对Promise链的工作原理可能存在误解。在您的代码中，您以一种可能导致意外结果的方式混合使用.then()和.catch()。

让我们分解您的代码以理解其流程：

如果房间被打扫干净，它会进入第一个.then()块并尝试踢足球。
在足球块内部，如果他进了球，它会进入第二个.then()块（这是正确的）。
如果他没有进球，它会进入第一个.catch()块。
现在，如果房间没有被打扫干净：

如预期那样，它进入第一个.catch()块。
在第一个.catch()块内部，它进入第二个.then()块（这可能出乎意料）。
这种行为的原因是当Promise被拒绝时，它会在链中查找最近的.catch()块。如果没有找到，它会查找下一个.then()块。在您的情况下，由于第一个.catch()块返回一个Promise，所以它会进入下一个.then()块。

要获得预期输出，应避免以这种方式混合使用.then()和.catch()块。相反，您可以为每个Promise使用单独的.then()和.catch()块。以下是您代码的修改版本：

roomCleaningPromise
  .then(function goFootballAfterCleaning(resolveValue) {
    console.log(`Room was cleaned so going to play Football -: ${resolveValue}`);
    return new Promise(function makeGoal(resolve, reject) {
      let number = Math.random();
      if (number >= 0.5) {
        resolve(number);
      } else {
        reject(new Error(number));
      }
    });
  })
  .then(
    function goConcertAfterGoal(resolveValue) {
      console.log(`Made a goal! Going to Music concert -: ${resolveValue}`);
    },
    function cleanDogAfterNoGoal(errorValue) {
      console.log(`Couldn't make a goal, cleaning the dog -: ${errorValue}`);
    }
  );

roomCleaningPromise
  .catch(function goLaundryAfterNoCleaning(errorValue) {
    console.log(`Room was not cleaned so going to do Laundry -: ${errorValue}`);
    return new Promise(function doLaundry(resolve, reject) {
      let number_2 = Math.random();
      if (number_2 >= 0.5) {
        resolve(number_2);
      } else {
        reject(new Error(number_2));
      }
    });
  })
  .then(
    function goConcertAfterLaundry(resolveValue) {
      console.log(`Completed laundry, now going to Music Concert -: ${resolveValue}`);
    },
    function cleanDogAfterNoLaundry(errorValue) {
      console.log(`Didn't complete laundry, cleaning the dog -: ${errorValue}`);
    }
  );

这样，每个Promise都有自己的.then()和.catch()块，使控制流更加可预测。