Javascript 如何在同一按钮上使用AbortController中止获取HTTP请求

问题是，我只需要通过单击“获取数据”按钮来获取最后一个API响应。应该取消以前的请求

其想法是使用ABROTC控制器。不幸的是，我遇到了一个问题，因为请求没有被取消，控制台接收到消息：

Fetch 1错误：未能在“窗口”上执行“Fetch”：用户已中止 请求

示例代码如下：

<button id="test">Fetch data</button>

let isLoading = false;

let controller = new AbortController();
const abort = () => controller.abort();

const button = document.getElementById("test");

const fetchData = () => {
  controller = new AbortController();
  
  if (isLoading) {
    abort();
  }
  
  isLoading = true;
  
  return fetch('https://jsonplaceholder.typicode.com/todos', {
        signal: controller.signal
      })
      .catch(e => {
        console.warn(`Fetch 1 error: ${e.message}`);
      })
      .finally(() => isLoading = false);;
}

button.addEventListener('click', () => {
  fetchData();
});

获取数据
设isLoading=false；
let controller=new AbortController（）；
const abort=（）=>controller.abort（）；
const button=document.getElementById（“测试”）；
常量fetchData=（）=>{
控制器=新的中止控制器（）；
如果（孤岛加载）{
中止（）；
}
isLoading=true；
返回获取（'https://jsonplaceholder.typicode.com/todos', {
信号：控制器。信号
})
.catch（e=>{
warn（`fetch1错误：${e.message}`）；
})
.最后（（）=>isLoading=false）；；
}
按钮。addEventListener（'单击'，（）=>{
fetchData（）；
});

这是因为您在不同的实例上调用了controller.abort（），而不是初始化信号

像这样的怎么样

let isLoading = false;
let controller = new AbortController();

const abort = () => controller.abort();

const button = document.getElementById("test");

const fetchData = () => {
  if (isLoading) {
    abort();
    controller = new AbortController();
  }
  
  isLoading = true;
  
  return fetch('https://jsonplaceholder.typicode.com/todos', {
        signal: controller.signal
      })
      .catch(e => {
        console.warn(`Fetch 1 error: ${e.message}`);
      })
      .finally(() => isLoading = false);
}

button.addEventListener('click', () => {
  fetchData();
});

---

另一种方法可以是使用RXjs的可观测值，这使得只获取最后获取的值并丢弃之前的值（这是角度上的标准值）以及去抖动、distinctUntilChanged和许多其他东西变得很容易。也

等待获取（…）比
.then（）