我有一个dashboard dates-filters下拉列表，每次用户更改下拉列表值时，我都会使用Axios发送多个网络请求。
为了防止用户快速更改日期过滤器时的后续API调用，我使用JS AbortController中止所有先前的请求，如果它们仍然处于挂起状态。
我在我的组件上使用自定义加载VueJS状态来显示加载屏幕，并基于请求状态如下：
Vue Html模板

<template>
        <div v-if="loadingSpendingCard">
          Loading...
        </div>

        <SpendingCard v-else/>
      </template>

Vue方法

{
...,
methods: {
  fetchData(){
      this.$store.dispatch("CANCEL_PENDING_REQUESTS");

      this.loadingSpendingCard = true;
       axiosApiClient.get("/user-spending");
        .then((response) => {
          console.log(response)
        })
        .catch((error) => {
          console.log(error);
        })
        .finally(() => {
          this.loadingSpendingCard = false;
        });
 }
}

使用Axios请求拦截器，我向每个请求添加一个新的AbortController，并从VueX处理它们的状态，以便稍后取消请求。
fetchData()在每次date-filters值改变时被调用。这意味着以前的请求被成功调用，新的请求被发送。
问题：每次我中止请求时，loadingSpendingCard被设置为false，新的请求i被发送，但loadingSpendingCard被卡在false上，它不会将值更新为true。
我期望在中止后的每个新请求上将loadingSpendingCard状态分配给true。
我尝试使用保持状态为true，如果error === "canceled"，则不更改它，这可以工作，但我有超过20个请求，为什么我的上述解决方案不起作用。

fetchData(){
      this.$store.dispatch("CANCEL_PENDING_REQUESTS");

      this.loadingSpendingCard = true;
       axiosApiClient.get("/user-spending");
        .then((response) => {
          console.log(response)
        })
        .catch((error) => {

         if(error === "canceled"){
          console.log("Canceled request")
         }else{
          this.loadingSpendingCard = false;
          console.log(error);
          }

        })
 }

为什么loadingSpendingCard状态不更新为true？