wx.request()的三层调用封装

记录封装微信小程序的Http请求
home.js调用theme,hs , theme调用http,js
home.js

// pages/home/home.js


import {Theme} from "../../Model/theme";

Page({

    /**
     * 页面的初始数据
     */
    data: {
        topTheme: null,
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
        // callBack里拿到了回调成功的函数:
        Theme.getHomeLocationTheme((data) => {
            this.setData({
                topTheme: data[0],
            })
        })
    },


    // 页面相关事件处理函数--监听用户下拉动作:
    onPullDownRefresh: function () {

    },

    // 页面上拉触底事件的处理函数:
    onReachBottom: function () {

    },

    // 用户点击右上角分享:
    onShareAppMessage: function () {

    }
})

theme.js

//业务对象:
// 要定义好一个一个的业务对象;
// theme , banner , spu(商品) , sku(单品) , address , user等 , 这些都是最基本的业务对象;
import {Http} from "../utils/http";

// ctrl + option + 字母O 自动删除无效的引用
/**
 *  主题业务对象类:
 */
class Theme {
    // 封装顶部sale模块的网络请求:接收一个callBack回调函数
    static getHomeLocationTheme(callBack) {
        Http.request({
            url: `theme/by/names`,
            method:'GET',
            data: {
                names: 't-1',
            },
            // 这边获取了实参data , 然后还要再传递出去:
            callBack: data =>{
                callBack(data);
            }
        })

        /*
        // 不加大括弧的形式传参:
        Http.request(`theme/by/names` , 'GET' , {names:'t-1'} , data => {
            callBack(data);
        })
         */
    }
}

export {
    Theme,
}

http.js

import {config} from "../Config/Config";

class Http {
    // 这边在request的参数外层用{}包裹 , 这样在方法的实现的时候就可以像写JS对象的方式一样去书写代码了~
    static request({url , method = 'GET' , data , callBack}) {
        wx.request({
            url: `${config.apiBaseUrl}${url}`,
            method: method,
            data: data,
            header: {
                appkey: config.appkey,
            },
            success(res) {
                // 把请求成功后获取的数据传递出去:
                callBack(res.data);
            }
        })
    }
/*
    // 这种形参不加大括弧的在外部调用的时候就只能用传参的形式 , 如果加上大括弧就可以像JS传递对象的形式一样!
    static request(url, method = 'GET', data, callBack) {
        wx.request({
            url: `${config.apiBaseUrl}${url}`,
            method: method,
            data: data,
            header: {
                appkey: config.appkey ,
            },
            success(res) {
                callBack(res.data);
            }
        })
    }
*/
}

export {
    Http,
}

愿编程让这个世界更美好