记录封装微信小程序的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,
}
