React

by shuliqi

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.17.1/axios.js"></script>
<div id="app"></div>

React

const CancelToken = axios.CancelToken;


class TodoApp extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
    	tips: '',
      data: null,
    }
    this.getData = this.getData.bind(this);
  }
  getData() {
    // 生成取消令牌`token`和取消方法`canc
    const source = CancelToken.source();
    
  	axios.get('https://www.fastmock.site/mock/d867c364f89208a7672e9e9d0a822417/qixiao/iterationinfo', {
    	// 取消的 token
      cancelToken: source.token
    })
    .then(({ data }) => {
    	this.setState({
     	 	tips: '',
        data: data.data,
      })
    	console.log('获得数据：', data.data)
    })
    .catch((thrown) => {
      if (axios.isCancel(thrown)) {
      	this.setState({ tips: thrown.message})
      }
    });
    // 取消方法`cancel
    source.cancel('手动把请求被取消了');
  };
  
  render() {
  const {
  	tips,
  } = this.state;
  const {
      complete,
      completeTime,
      count,
  } = this.state.data || {}
    return (
    	<div>
    	   <button onClick={this.getData}>连续点击</button>
         { tips && (
           <div>{tips}</div>
         )}
         { this.state.data && (
            <div>
              我请求到了数据
              <br/>
              complete :{complete}
               <br/>
              completeTime: {completeTime}
               <br/>
              count: {count}
           </div>
          )}
    	</div>
      
    )
  }
}

ReactDOM.render(<TodoApp />, document.querySelector("#app"))