React组件销毁中清理异步操作和取消请求

问题描述:

通常是 react 组件已销毁，但是组件中一些异步操作还未结束会报如下这个错误:
Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method.

解决方法:

• 情况一: 阻止异步操作

componentWillUnmount() {
  this.setState = (state, callback) => {
    return
  }
}

• 情况二: 阻止请求(axios)

...
constructor(props) {
	this.state=store.getState()
	this.source = axios.CancelToken.source() //生成取消令牌用于组件卸载阻止axios请求
}
...
componentDidMount = () => {
	const _t = this
	const url="xxxx";
    axios.get(url, {
    	cancelToken: _t.source.token 
    })
        .then(res => {
            ...
        })
        .catch(function(thrown) {
  			if (axios.isCancel(thrown)) {
    			console.log('Request canceled', thrown.message);
  			} else {
    			console.log(thrown)
  			}
		})
}
componentWillUnMount = () => {
    //阻止请求
    this.source.cancel('组件卸载,取消请求');
}

• 情况三: 清除定时

var timer;
...
componentDidMount = () => {
     timer = setTimeout(() => {
        this.setState({a:123})
    },1000)
}
componentWillUnMount = () => {
    clearTimeout(timer)
}