版权声明:本文为博主原创文章,未经博主允许不得转载。 https://cloud.tencent.com/developer/article/1333897
wx.request
的请求必不可少js
文件使用 wx.request
请求服务器数据时,因为异步的请求机制,我们不能在其success:function()
中直接返回需要的数据此时,回调函数的设计就有了存在价值
//此方法处于外部文件 “utils/util.js” 中进行了定义
function requestBanner(callback){
wx.request({
url: 'http://wxzergpro.com/api/v1/banner/1',
method: 'GET',
success: function (data) {
callback && callback(data);
},
})
}
var util = require('../../utils/util.js');
//定义的触发函数
cbRequest:function(){
//注意回调函数的调用
util.requestBanner(this.callbackFun);
},
//回调函数
callbackFun:function(res){
console.log('callbackFun:');
console.log(res);
},
cbRequest:function(){
util.requestBanner((res)=>{
console.log('callbackFun:');
console.log(res);
});
},
首先,是外部公共函数的设置,个人习惯提取使用率高的公共函数到外部文件,此处为
common.js
/**
* 根据商品ID获取商品详情
*/
function getGoodsInfo(doMain, goods_id, callback) {
wx.request({
url: doMain + '/WxApi/Goods/getGoodsInfo',
header: { 'Content-Type': 'application/json' },
data: {
goods_id: goods_id,
},
success: function (res) {
if (res.data.status) {
console.log(' 获取商品 详细信息');
//console.log(res.data.data)
return typeof callback == "function" && callback(res.data.data)
} else {
return typeof callback == "function" && callback(false)
}
},
fail: function () {
return typeof callback == "function" && callback(false)
}
}, )
}
/**
* 进行方法的暴露
*/
module.exports = {
getGoodsInfo: getGoodsInfo,
}
app.js
中:var common_js = require('utils/common.js')
App()
方法的最后,将所需的函数注册成为全局函数undefinedfunc: {getGoodsInfo: common_js.getGoodsInfo}
//获取应用实例
const app = getApp()
Page({
/** 页面的初始数据*/
data: {
goodsInfo: {}
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
var that = this;
var doMain = app.globalData.doMain
app.func.getGoodsInfo(doMain, options.id, function (goodsInfo) {
console.log(goodsInfo);
that.setData({
goodsInfo: goodsInfo,
});
//TODO 详情页的标题栏设置(动态)
wx.setNavigationBarTitle({
title: goodsInfo.title
})
})
},
..........
})