微信小程序Ⅵ [wx.request 的回调使用]

☆ 前言

• 在微信小程序的开发过程中，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 中：

1. 引入，公共文件 var common_js = require('utils/common.js')
2. 在其 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！

♩♪♫ 推荐参考

• 1 微信小程序开发基础篇之回调函数，匿名函数，闭包
• 2 微信小程序网络请求 wx.request 请求