umi react处理接口请求慢的问题

// 处理首页接口慢的问题
function handleLongReq(arr, types, that, time) {
    const { dispatch } = that.props;
    const res = arr.map(item => {
        item.data = that.props[item.model][item.key]
        return item
    });
    if (window.time === 0 || window.time === undefined) {
        arr.map(item => {
            const { key, effect, model } = item;
            types.push(effect);
            const data = that.props[model][key];
            if (data instanceof Array) {
                data.length !== 0 && dispatch({
                    type: model + "/resetData",
                    payload: {
                        data: []
                    },
                    keyName: key
                })
            } else if (data instanceof Object) {
                Object.keys(data).length !== 0 &&
                    dispatch({
                        type: model + "/resetData",
                        payload: {
                            data: {}
                        },
                        keyName: key
                    })

            }
        })
        window.time = time;
        window.homeInterval = setInterval(() => {
            window.time--;
            if (window.time === 0) {
                clearInterval(window.homeInterval)
            }
        }, 1000)
    } else {
        res.map(obj => {
            const { data, effect } = obj;
            if (data instanceof Array) {
                data.length === 0 ? types.push(effect) : del(types, effect)
            } else if (data instanceof Object) {
                Object.keys(statisticData).length === 0 ? types.push(effect) : del(types, effect)
            }
        })
    }

    function del(types, effect) {
        const index = types.findIndex(item => item === effect);
        types.splice(index, 1);
    }
}
//调用 要在 componentDidMount生命周期里
        
        const arr = [
            {
                key: 'sysTrend',
                effect: 'home/getSysTrend',
                model: 'home'
            },
            {
                key: 'statisticData',
                effect: 'home/getStatisticData',
                model: 'home'
            }
        ]

        handleLongReq(arr, types, this, 30);
//types是页面需要请求的所有effects ,默认不包含arr中的effects, 30表示定时器的时间

  • 注意:相关的model里要有重置此props数据的effect。