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})
            })
    }
}