Javascript 首次使用AbortController时，清除功能失败

我正在使用

AbortController

取消卸载时的

fetch

承诺。 由于某些原因，第一次卸载元素时，清理不起作用

useffect（（）=>{
const controller=new AbortController（）；
常数信号=控制器信号；
取回(`https://pokeapi.co/api/v2/pokemon/${name}`，{signal}）
.then（sleeper（1））//创建一些延迟
.then（res=>res.json（））
。然后（响应=>{
setData（响应）；
})
.catch（错误=>{
设置数据（错误）；
});
return（）=>{
controller.abort（）；
};
}[姓名]；

请执行以下步骤：

访问dedemo链接

快速单击

Show/hide pokemon

按钮两次，以强制中止子

pokemon

react元素

检查控制台中的错误：

无法对未安装的组件执行React状态更新

重复步骤2。快速单击

Show/hide pokemon

按钮两次，以强制中止子

pokemon

react元素

没有发现错误这一次以及随后的重试。为什么?

注意：当调用

abort（）

时，

fetch（）

承诺将以

DOMException

named

abortror

当组件卸载并调用

abort

时，

fetch

会错误地拒绝。捕捉到错误，此代码正在尝试设置错误的状态。忽略此错误状态更新将删除react错误

useEffect(() => {
  const controller = new AbortController();
  const signal = controller.signal;
  fetch(`https://pokeapi.co/api/v2/pokemon/${name}`, { signal })
    .then(sleeper(1)) // Create some latency
    .then(res => res.json())
    .then(response => {
      setData(response);
    })
    .catch(error => {
      setData(error); // <-- this is being called after component unmounts!
    });
  return () => {
    controller.abort();
  };
}, [name]);

useffect（（）=>{
const controller=new AbortController（）；
常数信号=控制器信号；
取回(`https://pokeapi.co/api/v2/pokemon/${name}`，{signal}）
.then（sleeper（1））//创建一些延迟
.then（res=>res.json（））
。然后（响应=>{
setData（响应）；
})
.catch（错误=>{
设置数据（错误）；//{
controller.abort（）；
};
}[姓名]；

---

我也愿意打赌，每次都会发生错误，但react只是输出第一个错误，并对后续错误进行沉默。

看起来不错，但对我来说没有意义…

中止

，正如自己的名字所说，应该停止已启动的操作并放弃所有附加到它的操作。如果

controller.abort（）

实际上拒绝了它，为什么不调用它

controller.reject（）

？有没有办法创建我想要的逻辑？@Rashomon提取被中止并返回一个被拒绝的承诺，是您的代码正在运行并捕获错误。我肯定有一些解决方法，但没有立即想到什么。