React Native性能优化之可取消的异步操作

前沿

在前端的项目开发中，异步操作是一个不可获取的，从用户的角度来说，异步操作所带来的体验是美妙的，但有时候也会带来一些性能隐患。比如说：有一个异步请求还没有返回结果，但是页面却关闭了，这时由于异步操作的存在，系统不能及时回收内存。

作者在今天就遇到了一个这样的场景，比如有一个输入框，用户点击搜索，发起异步请求，1.结果还没有返回回来，可以点击取消取消本次异步操作。2.用户关闭当前页面，取消本次异步操作。

解决方案

给Promise包裹上一层可以取消的功能，在then中判断根据传入的一个token去判断是否需要取消，然后是需要取消，则return，结束后续的action

export function onSearch(inputKey, pageSize, token, favoriteDao, popularKeys, callBack) {
return dispatch => {
dispatch({
type: Types.SEARCH_REFRESH
})
fetch(genFetchUrl(inputKey))
.then(response => {
return hasCancel(token) ? null : response.json(); // 如果任务取消，则不作任何处理
})
.then(responseData => {
if (hasCancel(token, true)) { // 如果任务取消，则不作任何处理
console.log(' user cancel task');
return;
}
if (!responseData || responseData.items || responseData.items.length === 0) {
dispatch({
type: Types.SEARCH_FAIL,
message: `沒找到关于${inputKey}相关的信息`
})
doCallBack(callBack, `没找到关于${inputKey}相关的项目`)
return;
}
let items = responseData.items;
handleData(Types.SEARCH_REFRESH_SUCCESS, dispatch, '', {data: items}, pageSize, favoriteDao, {
showBottomButton: !Utils.checkKeysIsExist(popularKeys, inputKey),
inputKey,
})
})
.catch(e => {
console.log(e);
dispatch({type:Types.SEARCH_FAIL, error: e})
})
}
}