关于react-native-storage中数据过期如果先使用过期数据,然后使用最新数据?



  • 目前在实现一个功能,希望RN模块优先从缓存中读取某一个数据pointNum,并显示在页面上。如果在缓存中没有这个数据或者过期(只考虑过期就好)的时候, 先从缓存中返回过期的数据进行显示,然后通过调用sync方法获取新数据,并且在新数据返回成功之后,再次返回到UI进行显示。

    以下是我的代码,不过,只是显示了过期数据,却并没有显示更新之后的最新数据:

    // 这里是我的调用,我设置了 sync 以及 syncInBackground:

        constructor(props){
        super(props);
    
        Storage.load({
            key : "pointNum",
            autoSync : true,
            syncInBackground : true
        }).then(ret => {
            this.setState({
                pointNum : ret
            });    
        }).catch(err => {
            this.setState({
                pointNum : err.toString()        
            });    
        })
    }   
    

    // 下面是我的sync方法的实现:

    sync: {
        pointNum(params){
            const { resolve, reject } = params;
    
            setTimeout(() => {
                const pointNum = (new Date().getMinutes()) + "" + (new Date().getSeconds());
                
                storage.save({
                    key : "pointNum",
                    rawData : pointNum
                });
    
                resolve && resolve(pointNum);
            }, 3000);
        }
    }
    

    不知道有没有办法实现我要的那种功能呢?



  • @sunnylqm 求助帮忙看看我的功能能否实现哈 谢谢 🙏


  • administrators

    可以在0.1.5版本(刚刚发布)中实现

    0.1.5版本中添加了传递给sync方法的额外参数syncParams

    storage.load({
            key : "pointNum",
            syncInBackground : true,
            syncParams: {
                callback: latestData => {
                    console.log(latestData)
                }
            }
    })
    
    // ...
    pointNum(params){
            const { resolve, reject, syncParams: { callback } } = params;
    
            setTimeout(() => {
                const pointNum = (new Date().getMinutes()) + "" + (new Date().getSeconds());
                
                storage.save({
                    key : "pointNum",
                    rawData : pointNum
                });
    
                resolve && resolve(pointNum);
                callback && callback(pointNum);
            }, 3000);
        }
    
    


  • @sunnylqm 谢谢 我试一下~



  • @sunnylqm 发现一个问题, 比如我在下面的load方法中设置了 syncParams.callback :

        Storage.load({
            key : "pointNum",
            autoSync : true,
            syncInBackground : true,
            syncParams : {
                callback : (pointNum) => {
                    console.log("callback");
                    this.setState({ pointNum });
                }
            }
        });
    

    然后,我的sync方法设置如下:

        pointNum(params){
            const { resolve, reject, syncParams : { callback} } = params;
    
            setTimeout(() => {
                const pointNum = (new Date().getMinutes()) + "" + (new Date().getSeconds());
                
                storage.save({
                    key : "pointNum",
                    rawData : pointNum
                });
    
                //resolve && resolve(pointNum);
                callback && callback(pointNum);
            }, 3000);
    

    这里无论是因为数据不存在还是过期, 我都会调用 callback 来完成我的目的, 那么感觉原先的 resolve 与 reject 就会被渐渐弱化甚至不被使用(我上面已经注释掉了 resolve 相关的代码,在load的时候也放弃了promise的使用方法,转而采用原始的回调方式),有没有办法能够在数据过期的时候, 也可以通过调用 resolve 达到目标呢, 虽然现在的扩展能够实现我的功能, 不过感觉从组件整体设计考虑,感觉不是最优方案 😊


  • administrators

    load后面还是接then啊,那么就是先使用过期的数据,然后回调使用最新的数据

    当然这样写代码确实很繁琐,但promise不可能有两次返回,我暂时也想不到更好的办法。



  • @sunnylqm 嗯 就是callback会多调用一场 , 比较尴尬


登录后回复