接口优化之缓存技术

在小程序实际开发的时候，当实际页面渲染的数据过多时（api接口实际传送的数据过多时），如果有频繁地进行页面的来回切换，会频繁的发送请求，数据量过大时，

受网络因素等影响，用户的实际体验可能不太友好，因此有必要利用缓存技术对接口进行优化。

和web前端开发时利用localstorage来对接收的数据进行缓存的原理很像，微信小程序也有着自己的进行数据缓存的地方。不过二者之间还是有些许区别的：

web本地缓存和小程序中的区别：

a.代码编写方式的不同：

web中：

localStorage.setItem('key',value);

localStorage.getItem('key');

 

这个想必大家都很熟悉的

但是小程序中却是不同：

wx.setStorageSync('key',value);

wx.getStorageSync('key');

 

在实际开发时，为了区分缓存的数据是否有outDate,通常会在value中添加时间属性，与当前时间的比较以确定数据的老旧。

例:

wx.setStorageSync("cates", {time:Date.now(),data:this.getCatesList});
wx.getStorageSync('cates')；

 

 

b.存数据的时候有没有做类型转换

web本地存储数据时要求只能存储字符串的数据所以别的类型的数据通常需要JSON.stringify()或者调用toString()进行转换,在拿数据时调用JSON.parse将字符串的数据转变成对象。

而小程序本地存储数据未对数据进行任何地转换，存进去是什么，拿出来的便是什么。

在mall小程序的开发中，js利用本地缓存进行优化的步骤如下：

1.先判断本地缓存中有没有旧的数据
{time:date.now(),data:...}

2.没有旧的数据则发送新的api请求来获取数据

3.有旧的数据且没有过期（自己根据数据来设定一个新旧过渡期的一个时间段），则来使用本地缓存中的数据。

 

*/本期到此为止