Aborted fetch 仍在调用“then”函数？

Posted 2023-02-22

【中文标题】Aborted fetch 仍在调用“then”函数？

【英文标题】：Aborted fetch is still calling "then" function?

【发布时间】：2018-09-14 04:03:34

【问题描述】：

我有一个反应组件，它在装载/卸载时调用 fetch/abort， 当我试图将 fetch 函数移动到一个单独的类时，即使在中止 fetch 请求之后，“then”函数也会继续调用，因此“Not Aborted”文本会打印到控制台。

看起来像这样：

反应组件

class ReactComponent extends Component 
  constructor(props) 
    super(props);
    this.TodoService = new TodoService();
  

  componentDidMount() 
    this.TodoService.fetch().then(res => 
        console.log("Not Aborted");
    );
  

  componentWillUnmount() 
    this.TodoService.abort();
  

TodoService

class TodoService 
  constructor() 
    this.controller = new AbortController();
    this.signal = this.controller.signal;
  

  handleErrors(response) 
    if (response.ok) 
      return response;
    
    throw Error(response.statusText);
  

  fetch() 
    return fetch(`todos`, 
      signal: this.signal
    )
      .then(this.handleErrors)
      .then(res => res.json())
      .catch(err => console.error(err));
  

  abort() 
    this.controller.abort();
  

【问题讨论】：

如果你注释掉你的catch()，它会这样做吗？你在那个 catch 中返回 undefined ，这也将解决这个承诺。

是的！谢谢@charlietfl

【参考方案1】：

我觉得这可能归结为 this 上下文。

尝试将这些添加到 TodoService 构造函数： this.fetch = this.fetch.bind(this); this.abort = this.abort.bind(this);

您正在从不同的上下文调用这些方法，并且将使用当前上下文this。

这是AbortController的浏览器支持

【参考方案2】：

你也可以试试这个：

fetch() 

     return fetch(`todos`, 
        signal: this.signal, 
        this.controller.abort()
   )
  .then(this.handleErrors)
  .then(res => res.json())
  .catch(err => console.error(err));