☆ 前言
- 在微信小程序的开发过程中,
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);
},
})
}
②. 当前页面对应 js方法的
- 前提需要引入公共文件
var util = require('../../utils/util.js');
//定义的触发函数
cbRequest:function(){
//注意回调函数的调用
util.requestBanner(this.callbackFun);
},
//回调函数
callbackFun:function(res){
console.log('callbackFun:');
console.log(res);
},
- ES6 支持一种简写方式:
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()
方法的最后,将所需的函数注册成为全局函数
func: {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
})
})
},
..........
})
- 执行结果,可参考打印出的信息
¤ 附录
- 关于回调函数,有一个所谓的好莱坞准则:Don’t call me; I’ll call you!