☆ 前言

• 在微信小程式的開發過程中，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！

♩♪♫ 推薦參考