React-Native|AsyncStorage缓存网络数据

第一次请求网络数据时，把数据保存在本地并记录当前时间，下次请求时，如果有本地数据就先显示本地数据，并且判断如果保存该数据的时间与当前时间超过或等于一分钟，再去请求网络更新数据，并保存在本地。

在先前的ListView的基础上改了改：

import ListViewItemDemo from './ListViewItemDemo';
import Toast,{DURATION} from 'react-native-easy-toast';
const URL="http://101.201.78.24/api/activity/list";

export default class ListViewDemo extends Component {

    constructor(props){
        super(props);
        this.state={
            count:0,
            result:'',
            refreshing:true,
            dataSource:new ListView.DataSource({
                rowHasChanged:(r1,r2)=>r1!=r2,
            }),
            isFirstIn:true,
            dataArray:[],
            coffee:'',
        };
    }

    //请求网络数据
    getNetData(url){
        var promise=new Promise((resolve,reject)=>{
            fetch(url).then(response=> response.json()).
            then(result=>{
                this.refs.toast.show("请求网络数据",DURATION.LENGTH_SHORT);
                //在请求网络数据时，把数据保存在本地
                if(!result){
                    reject(new Error('请求网络数据发生错误'));
                    return;
                }
                resolve(result);
                this.saveLocalData(url,result);
            }).
            catch(error=>reject(error));
        });
        return promise;
    }

    //实现缓存功能
    fetchData(url){
        var promise=new Promise((resolve,reject)=>{
            //获取本地数据
            this.getLocalData(url).then(result=>{
                //如果有本地数据，返回给调用者
                if(result){
                    this.refs.toast.show("显示的是本地数据",DURATION.LENGTH_SHORT);
                    resolve(result);
                }else{
                    this.refs.toast.show("第一次请求网络数据",DURATION.LENGTH_SHORT);
                    //没有本地数据，那么去请求网络数据
                    this.getNetData(url).then(result=>{
                        resolve(result)
                    }).catch(error=>{
                        reject(error)
                    })
                }
            })
            //获取本地数据发生异常,则也去请求网络数据
            .catch(error=>{
                this.getNetData(url).then(result=>{
                    resolve(result)
                }).catch(error=>{
                    reject(error)
                })
            })
        });
        return promise;
    }

    //获取本地数据
    getLocalData(url){
        var promise=new Promise((resolve,reject)=>{
            AsyncStorage.getItem(url,(error,result)=>{
                if(error){
                    reject(error);
                }else{
                    //从本地数据库获取的是字符串，转化为构建该字符串的对象
                    try{
                        resolve(JSON.parse(result));
                    }catch (e){
                        reject(e);
                    }
                }
            })
        });
        return promise;
    }

    saveLocalData(url,result){
        if(!url||!result)return;
        let wrapData={
            resultData:result,
            update:new Date().getTime(),
        };
        //保存在本地数据库的是字符串，保存字符串对象会出现错误
        AsyncStorage.setItem(url,JSON.stringify(wrapData),error=>{

        })
    }

    //判断数据
    isUpdate(saveTime){
        let currentDate=new Date();
        let saveDate=new Date()
        saveDate.setTime(saveTime);
        //超过或等于一分钟再去请求网络数据
        if(currentDate.getMinutes()-saveDate.getMinutes()>=1){
            return true;
        }else{
            return false;
        }
    }

    componentDidMount(){
        this.onLoad();
    }

    onRefresh(){
        this.onLoad();
    }

    onLoad(){
        this.setState({
            refreshing:true,
        });
        this.fetchData(URL).then(result=> {
            let realResult=result&&result.resultData?result.resultData:result;
            this.setState({
                dataSource: this.state.dataSource.cloneWithRows(realResult.data.results),
                refreshing:false,
            });
            //如果本地的数据保存的时间和当前时间差值达到一定限度，则需要访问网络
            if(result&&result.update&&this.isUpdate(result.update)){
                return this.getNetData(URL);
            }
        })
            .then(result=>{
                this.setState({
                    dataSource: this.state.dataSource.cloneWithRows(result.data.results),
                    refreshing:false,
                });
            })
            .catch(error=>{
                console.log(error)
            });
    }

    renderRow(item){
        return <ListViewItemDemo item={item}/>
    }

    renderLine(){
        return <View style={styles.line}></View>
    }

    render(){
        return(
            <View style={styles.containers}>
                <ListView
                    dataSource={this.state.dataSource}
                    renderRow={(item)=>this.renderRow(item)}
                    renderSeparator={()=>this.renderLine()}
                    refreshControl={
                        <RefreshControl
                            refreshing={this.state.refreshing}
                            onRefresh={()=>this.onRefresh()}
                        />
                    }
                />
                {/*Toast在根视图的底部去使用,在视图被渲染时，把toast声明*/}
                <Toast
                    ref="toast"/>
            </View>
        )
    }
}

const styles=StyleSheet.create({
    containers: {
        flex:1,
    },
    line:{
        backgroundColor:'red',
        height:0.5,
    }
});

在保存数据的时候，注意把当前的时间也保存下来。