微信小程序组件调用接口，本地缓存问题

大家都知道组件很好用，很多情况下我们会用到组件，比如很多小程序有用到 **“咨询”这个功能，这个功能需要在每个tarBar页面都有入口文件，那么问题就来了，我们这个咨询如果是有用到图片和文字需要用到接口的时候，我们第一时间会想到能不能在组件上调用接口，这样的话我们就不需要在每个页面再次请求接口，增加工作量。那么，能在组件上调用接口吗？当然是可以的拉，因为组件也有他的生命周期，代码如下：
const network = require("…/…/resource/js/network.js") //封装的接口
Component({
lifetimes: {
attached: function() {
// 在组件实例进入页面节点树时执行
let that = this
// 获取页面
network.requests({
url: “homepage”,
data: {
to_uid: “1026”,
user_id: “1026”
},
method: “POST”,
successF: function(res) {
that.setData({
cardInfo: res.data.data.head
})
}
})
},
detached: function() {
// 在组件实例被从页面节点树移除时执行
},
},
/
* 组件的属性列表
*/
properties: {},
// 组件的初始数据
data: {
cardInfo: []
}

	 ......
	  })

这样就已经在组件请求接口完成了，当然这有个弊端，接口的重复的请求会影响性能，而我们做前端的必须要考虑到用户体验感，因此也就引出了——缓存这个概念。由字面上就可以理解，我们请求一个接口，然后将自己需要的数据缓存到本地，然后需要的话就只需要调用本地存储，这样就没有那么多HTTP请求了。
好了，那么看下缓存的代码吧：
home.js代码
getHome: function(e) {
let that = this
// 获取页面
network.requests({//已封装的接口，相当于wx.request()
url: “homepage”,
data: {
to_uid: “1026”,
user_id: “1026”
},
method: “POST”,
successF: function(res) {
wx.setStorageSync(“consultHead”, res.data.data.head);//储存数据
// console.log(res.data.data)
that.setData({
pageTem: res.data.data,
cardInfo: res.data.data.head
})
}
})
}

组件中获取数据：
Component({
lifetimes: {
ready: function () {//页面加载完成在获取本地存储
var K = wx.getStorageSync(“consultHead”)
this.setData({
cardInfo: K
})
},
},
/**

• 组件的属性列表
  */
  properties: {
  cardInfo:{//接收父组件传过的参数
  type:null
  }
  },

/**

• 组件的初始数据
  */
  data: {
  cardInfo: []
  },