zoukankan      html  css  js  c++  java
  • 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。
  • 相关阅读:
    eureka流程图
    Feign和Ribbon的重试机制
    idea编译kafka 2.6 源码
    Feign的调用流程
    FeignClientFactoryBean创建动态代理
    Feign源码的入口
    Ribbon的检查服务
    Ribbon是怎么和Eureka整合的?
    Eureka过期
    backup: sqlHelper --cSharp
  • 原文地址:https://www.cnblogs.com/chengyunshen/p/12852517.html
Copyright © 2011-2022 走看看