微信小程序Ⅵ [wx.request 的回调使用]
微信小程序Ⅵ [wx.request 的回调使用]
泥豆芽儿 MT
发布于 2018-09-11 11:42:53
发布于 2018-09-11 11:42:53
版权声明：本文为博主原创文章，未经博主允许不得转载。 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);
},
})
}②. 当前页面对应 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()方法的最后，将所需的函数注册成为全局函数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
})
})
},
..........
})- 执行结果，可参考打印出的信息
¤ 附录
- 关于回调函数，有一个所谓的好莱坞准则：Don’t call me; I’ll call you！
♩♪♫ 推荐参考
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2018年03月16日，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读