小程序学习--请求API数据中引入models(页面请求数据封装优化)

我的一篇博客讲到关于请求数据的优化,现在尝试引入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中写上对应的值就可以渲染出来,

具体的可以看我的博客 小程序学习--点赞组件(支持复用)

https://mp.csdn.net/postedit/83781613