手摸手教你在小程序中优雅使用async与awite语法糖

前言

小程序本身是没有async和awaite语法糖的,所以我们得先封装一个方法把回调函数转成promise,这样后续请求才能使用async与awite

1.添加核心工具函数

const promisic = function (func) {
    return function (params = {}) {
        return new Promise((resolve, reject) => {
            const args = Object.assign(params, {
                success: (res) => {
                    resolve(res);
                },
                fail: (error) => {
                    reject(error)
                }
            });
            func(args);
        })
    }
    export {
    promisic
}
}

ps:这个promisic函数接受一个函数,返回的是promise对象

2.promisic的使用方法与http对象的封装 ps:Http类下函数request中,promisic里面传递的wx.request微信原生http请求api,后面携带参数,header视业务需求而定可以不要,config是编写的全局配置,如下:

const config = {
    appkey: "XXXXXXXXXXXXXXXXXXXXXXXXX",
    apiBaseUrl: 'XXXXXXXXXXXXXXXXXXXXX'
};
export {
    config
};

ps:js文件中类与变量都别忘了使用export导出哦~

3.Http请求类的调用与数据绑定

(1)在Http类的调用之前,我们得先想一个问题,我们是在哪里调用比较合适呢,在控制层还是在模型层?想明白这一点很关键,我个人觉得在模型层面请求具体接口数据,控制层制作具体逻辑实现,这样分工会比较好,所以我们还得设计一个类调用Http类请求接口并且return出去,控制层来调用

ps:最好是单独在项目目录里面单独新建一个model文件夹,模型层全放这里面,负责请求接口,这样可以增加维护性

(2)控制层的调用

ps:onload是小程序生命周期中的页面加载前的钩子函数,使用async与awite,并使用this.setData设置data中grid的数据

(3)这时候,控制层中的data已近有了grid数据,html(视图层)使用grid来相应的渲染就行了,基础中的基础,不在赘述.