react native 增加react-native-storage

Posted 2020-10-27 WesChan

现时需要使用react-native-storage本地存储

第一步：配置storage主文件

mystorage.js

import { AsyncStorage } from ‘react-native‘;
import Storage from ‘react-native-storage‘;

import sync from ‘./sync‘;

let storage = new Storage({
    // 最大容量，默认值1000条数据循环存储
    size: 1000,

    // 存储引擎：对于RN使用AsyncStorage，对于web使用window.localStorage
    // 如果不指定则数据只会保存在内存中，重启后即丢失
    storageBackend: AsyncStorage,

    // 数据过期时间，默认一整天（1000 * 3600 * 24 毫秒），设为null则永不过期
    defaultExpires: 1000 * 3600 * 1,//一个小时

    // 读写时在内存中缓存数据。默认启用。
    enableCache: true,

    // 如果storage中没有相应数据，或数据已过期，
    // 则会调用相应的sync方法，无缝返回最新数据。
    // sync方法的具体说明会在后文提到
    // 你可以在构造函数这里就写好sync的方法
    // 或是写到另一个文件里，这里require引入
    // 或是在任何时候，直接对storage.sync进行赋值修改
    // sync: require(‘./sync‘)
})

storage.sync = sync;

// 全局变量
global.storage = storage;

 

第二步：配置storage的sync方法

sync.js

import { default_API_url } from ‘../config/index‘;

const sync = {
    // sync方法的名字必须和所存数据的key完全相同
    // 方法接受的参数为一整个object，所有参数从object中解构取出
    // 这里可以使用promise。或是使用普通回调函数，但需要调用resolve或reject。
    issue(params) {
        let { id, resolve, reject, syncParams: { extraFetchOptions, someFlag } } = params;

        fetch(default_API_url + ‘/issue/‘, {
            method: ‘GET‘,
            headers: {
                ‘Accept‘: ‘application/json‘,
                ‘Content-Type‘: ‘application/json‘,
                ‘Authorization‘: extraFetchOptions.token
            },
            // body: ‘id=‘ + id,
            ...extraFetchOptions,
        }).then(response => {
            return response.json();
        }).then(json => {
            console.log(json);
            if (json && json.results) {
                storage.save({
                    key: ‘issue‘,
                    id,
                    data: json.results
                });

                if (someFlag) {
                    // 根据syncParams中的额外参数做对应处理
                }

                // 成功则调用resolve
                resolve && resolve(json.results);
            }
            else {
                // 失败则调用reject
                reject && reject(new Error(‘data parse error‘));
            }
        }).catch(err => {
            console.warn(err);
            reject && reject(err);
        });
    }
}

export default sync;

 

第三步：App.js调用storage主文件

//storage
import storage from ‘./src/util/myStorage‘;

 

第四步：应用中调用

homeComponent.js

storage.load({
    key: ‘issue‘,

    // autoSync(默认为true)意味着在没有找到数据或数据过期时自动调用相应的sync方法
    autoSync: true,

    // syncInBackground(默认为true)意味着如果数据过期，
    // 在调用sync方法的同时先返回已经过期的数据。
    // 设置为false的话，则等待sync方法提供的最新数据(当然会需要更多时间)。
    syncInBackground: true,

    // 你还可以给sync方法传递额外的参数
    syncParams: {
        extraFetchOptions: {
            // 各种参数
            token: this.props.userEntity.token
        },
        someFlag: true,
    },
}).then(ret => {
    // 如果找到数据，则在then方法中返回
    // 注意：这是异步返回的结果（不了解异步请自行搜索学习）
    // 你只能在then这个方法内继续处理ret数据
    // 而不能在then以外处理
    // 也没有办法“变成”同步返回
    // 你也可以使用“看似”同步的async/await语法

    console.log(ret);
    this.setState({ issueData: ret });
}).catch(err => {
    //如果没有找到数据且没有sync方法，
    //或者有其他异常，则在catch中返回
    console.warn(err.message);
    switch (err.name) {
        case ‘NotFoundError‘:
            // TODO;
            break;
        case ‘ExpiredError‘:
            // TODO
            break;
    }
})