☆ 前言
在微信小程序的开发过程中,wx.request
的请求必不可少我注意到(也可能刚接触,知识积累面太少),在外部js
文件使用wx.request
请求服务器数据时,因为异步的请求机制,我们不能在其success:function()
中直接返回需要的数据此时,回调函数的设计就有了存在价值
#★ 简单例子用法演示
①. 首先设计外部方法
注意参数的设置,及回调时的写法//此方法处于外部文件 “utils/util.js” 中进行了定义function requestBanner(callback){wx.request({url: '/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.doMainapp.func.getGoodsInfo(doMain, options.id, function (goodsInfo) {console.log(goodsInfo);that.setData({goodsInfo: goodsInfo,});//TODO 详情页的标题栏设置(动态) wx.setNavigationBarTitle({title: goodsInfo.title})})},..........})
执行结果,可参考打印出的信息