React组件中需等待被取消请求的Promise的finally块执行后再启动新请求的问题求助

各位大佬好，我在写React组件的时候碰到个头疼的问题，想请教下大家怎么解决：

我做了一个有三个按钮的React组件，每个按钮对应用户的一个选择。当用户点击按钮时会发起HTTP请求，如果用户接着点击另一个按钮，我会用AbortController.signal.abort()取消之前的请求，这部分操作本身其实挺简单的。

但麻烦的是，请求方法里有个loading状态，我把它放在了try {} catch {} finally {}代码块里。现在的问题是：当我取消第一个Promise时，HTTP请求确实被取消了，但第二个Promise会在第一个Promise进入finally块之前就开始执行，导致loader先变成false，可第二个请求还没完成，状态就乱掉了。

具体的执行顺序是这样的：

1. 第一次点击 -> 第一个Promise开始执行
2. 再次点击 -> 第二个Promise开始执行
3. 第一个HTTP请求被取消
4. 新请求启动
5. 第一个函数的finally {}块开始执行
6. 第二个函数的finally {}块开始执行

我试过两种解决方式： #

第一种方式 #

export default function SingleTesterQuestion({
  question,
}: {
  question: SomeType...

备注：内容来源于stack exchange，提问作者Itay