我的一篇博客讲到关于请求数据的优化,现在尝试引入models进行更好的优化,如果有不清楚的,可以先看下我之前的博客:
https://blog.csdn.net/zhangzeshan/article/details/83868856
好,接下里开始讲关于引入models优化页面js请求数据的方法:
在根目录下新建文件夹 models 然后在文件夹下创建页面的js文件,比如我的page页面是classic 那就在文件夹下创建classic.js
//导入封装的http.js
import{HTTP}from'http.js的相对路径'
//定义classic类继承HTTP 注意大小写
class ClassicModel extends HTTP{
//定义方法
getLatest(sCallback){
this.request({
url:'classic页面请求数据的APIurl',
success:(res)=>{
sCallback.(res)//回传到classic.js中
}
})
}
}
export{ClassicModel }
接下来改写classic页面的 class.js文件,同样,也是onload生命周期函数,我们将原来的代码全部删掉重写,还有最上方的导入js的句子重写!
//导入models文件夹中的classic.js下的ClassicModel类
import{ClassicModel}from 'classic.js的相对路径'
//实例化这个类
let classic = new ClassicModel()
//接下来找到onload生命周期函数
onload:function(options){
//调用类下面的方法 传参到类中去接受
classic.getLatest((res)=>{
//数据绑定
this.setData({
classic:res
})
})
}
到这边 可以就拿到API的数据了 只要在wxml中写上对应的值就可以渲染出来,
具体的可以看我的博客 小程序学习--点赞组件(支持复用)