某些时候当一个组件卸载时，网络请求还在进行中，有些请求不处理没有问题，但有些不处理会带来一些问题。轻微的问题比如警告，严重的会引起App崩溃。在组件被卸载时，取消一些网络请求还是很有必要的。这种问题处理方式大概有四种：
1.在组件中添加一个标志，在网络请求的回调中进行判断。
constructor(){
this.unmout = false;
}
componentDidMount(){
this._httpServoce.getXXX().then(value=>{
if(this.unmount){
return;
}
this.setState({data:value});
})
}
componentWillUnmount(){
this.unmout = true;
}
2.手动实现取消
底层实现一个取消方法，当将fetch的返回执（promise），进行一次封装。
function cancelable(response) {
this.cancel = false;
const data = new Promise((resolve,rejected)=>{
response.then(value=>this.cancel?rejected("cancel"):resolve(value) ).catch(err=>this.cancel?rejected("cancel"):rejected(err));
});
return {
data,
cancel:()=>{this.cancel = true;}
}
}
cons response = fetch({....});
const {data,cancel} = cancelable( promise1);
data.then(value=>console.log(value)).catch(error=>console.log(error));
cancel();
这里有人已经实现的一个hook可以拿来就用，比较方便。
也可以用Promise.race实现，看这篇文章。
3.使用AbortController
react-native 0.60之前的版本需要安装abortcontroller-polyfill
只要发送请求时，传入信号量signal，当需要取消请求时调用controller上的abort方法。
const controller = new AbortController();
const signal = controller.signal;
fetch('/some/url', {signal})
.then(res => res.json())
.then(data => {
// do something with "data"
}).catch(err => {
if (err.name == 'AbortError') {
return;
}
});
// controller.abort(); // can be called at any time
4.使用Axios库
Axios 是一个基于promise 的HTTP 库，对请求和响应都做了很好的封装。
使用Axios取消请求，首先创建一个source，然后将source.token传入请求方法的配置里。当需要取消的时候调用source的cancel方法。
const CancelToken = axios.CancelToken;
const source = CancelToken.source();
axios.get('/user/12345', {
cancelToken: source.token
}).catch(function (thrown) {
if (axios.isCancel(thrown)) {
console.log('Request canceled', thrown.message);
} else {
// handle error
}
});
axios.post('/user/12345', {
name: 'new name'
}, {
cancelToken: source.token
})
// cancel the request (the message parameter is optional)
source.cancel('Operation canceled by the user.');
