Flutter:首页数据缓存,读取缓存,更新缓存
每次启动APP,都要等接口返回数据后才能渲染页面,接口如果比较慢,数据可能需要过两三秒才能更新,用户体验不是太好。
想要实现首页的常规数据缓存:
1、请求数据并缓存数据,更新页面,
2、下次启动APP,先读取缓存,更新页面
3、在走接口请求更新数据,存储新的数据,更新页面
controller控制器
// 分类导航数据
List<CategoryModel> categoryItems = [];
// 推荐商品数据
List<ProductModel> pushProductList = [];
// 读取缓存
Future<void> _loadCacheData() async{
// json字符串
var string_categoryItems= Storage().getString('categoryItems');
var string_pushProductList = Storage().getString('pushProductList');
// json字符串转map
categoryItems = string_categoryItems !=""
? jsonDecode(string_categoryItems).map<CategoryModel>((item){
return CategoryModel.fromJson(item);
}).toList()
: [];
pushProductList = string_pushProductList !=""
? jsonDecode(string_pushProductList).map<ProductModel>((item){
return ProductModel.fromJson(item);
}).toList()
: [];
// 如果其中任何一项不为空,则更新视图
if(categoryItems.isNotEmpty || pushProductList.isNotEmpty){
update(["home"]);
}
}
/*
* 需要初始化的数据
* */
_initData() async{
// 分类
categoryItems = await ProductApi.categories();
// 推荐商品
pushProductList = await ProductApi.products(ProductsReq());
// 缓存数据
Storage().setJson('categoryItems', categoryItems);
Storage().setJson('pushProductList', pushProductList);
update(["home"]);
}
// onInit:1、先执行,获取缓存
@override
void onInit() {
super.onInit();
_loadCacheData();
}
// onReady:2、后执行,更新数据
@override
void onReady() {
super.onReady();
_initData();
}