问Axios“取消”api调用

EN

const signal = CancelToken.source();

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

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;