Axios“取消”api 调用

Question

我有一个页面，里面有一个componentDidMount(). 我们有 API 调用，但是如果您在这些调用解决之前离开，则会收到 React 错误。您不能setState在未安装的组件上。因此，出于这个原因，我使用 AxioscancelToken来取消componentWillUnmount(). 它正在工作并且 API 调用正在被取消。

但是，如果您离开，然后返回同一页面，我会发现这些 API 调用仍然被取消并且没有得到解决。也许我实施的cancelToken方式错误，或者有没有办法“取消”这些调用？

这是codesandbox： axios cancelToken示例

Answer 1

问题是创建一个在文件级别范围内创建的取消标记。因此，第一次生成时，此后，每次请求都会被取消，而不会发出请求。

const signal = CancelToken.source();

class Roster extends React.Component {
   ...........
}

signal因此删除了在类之前声明Roster并包含在组件构造函数中的const Roster。

Roster我已经修改了从您的示例代码中获取的组件的代码，如下所示：

import React from "react";
import axios, { CancelToken } from "axios";
import request from "./api";

class Roster extends React.Component {
  constructor() {
    super();

    this.state = {
      data: null,
      error: null
    };
    this.signal = CancelToken.source();
  }

  componentDidMount() {
    request({ url: "google.com", method: "GET", cancelToken: this.signal })
      .then(data => this.setState({ data }))
      .catch(error => {
        if (axios.isCancel(error)) {
          this.setState({ error: "request cancelled" });
        }
      });
  }

  componentWillUnmount() {
    this.signal.cancel();
  }

  render() {
    const { data, error } = this.state;
    return (
      <div>
        <div>data: {data ? data : "no data"}</div>
        <div>error: {error ? error : "no error"}</div>
      </div>
    );
  }
}

export default Roster;