从API接口中获取商铺列表的数据
如何从API接口中获取数据并分配到每一个页面呢?😏
可是API是什么😐?在这里API就是服务器,里面有很多数据就是了🤣
言归正传。首先呢,我们在js文件的data中定义以下数据
data: {
query: {},//用来存放onLoad函数传回来的数据
shopList: [],//创建一个数组
page: 1,//shoplist是第一个项目
pageSize: 10,//每一页获取多少个数据
total: 0,//总共的数据数
},
接下来写一个函数,用来请求服务器的数据
getShopList() {
wx.request({
url: `https://www.escook.cn/categories/${this.data.query.id}/shops`,
method: 'GET',
data: {
_page: this.data.page,
_limit: this.data.pageSize
},
success: (res) => {
console.log(res)
this.setData({
shopList: [...this.data.shopList, ...res.data],
total: res.header['X-Total-Count'] - 0
})
},
1.其中id 和title 是每当我打开本页面时,就会发送给query 的2个数据,分别是id和title(如下图)
2.而${this.data.query.id}代表了数据请求时分类的id 因为这个页面的id就是data中query里的id(值为1)
3.这里的data代表请求的数据:
data中的_page代表了请求第几页的数据(在这里就是将data中page的值(1)赋值给_page)
_limit代表了请求的这一页的数据有几个(同理,是将data中pageSize的值(10)赋值给_page)
4.success函数是请求成功后的回调函数,创建一个res变量,利用setData来赋值,其中我们使用shoplist来使用展开运算符来进行拼接,拼接的就是res中data对应的数据,最终赋予shoplist数组
5.值得一提的是:res中的数据,就是我在success后面加入console.log()用来打印res中数据的原因。
6.最后就是对total进行赋值了(X-Total-Count表示这个页面总共有多少条数据),它身上的值就是res数据中的header中的X-Total-Count,but 由于X-Total-Count中间带了减号所以我们不能用点要用字符串的形式进行赋值,由于要输出的是一个数字所以后面加了一个 减0
这是我的学习笔记,最后如果各位觉得我的解释有什么问题,请多多指教!!