微信小程序 之 請求函數封裝

封裝的request的代碼

/**
 * @desc    API請求接口類封裝
 */
/**
 * POST請求API
 * @param  {String}   url         接口地址
 * @param  {Object}   params      請求的參數
 * @param  {Object}   sourceObj   來源對象
 * @param  {Function} successFun  接口調用成功返回的回調函數
 * @param  {Function} failFun     接口調用失敗的回調函數
 * @param  {Function} completeFun 接口調用結束的回調函數(調用成功、失敗都會執行)
 */
function requestPostApi(url, params, sourceObj, successFun, failFun, completeFun) {
    requestApi(url, params, 'POST', sourceObj, successFun, failFun, completeFun)
}
/**
 * GET請求API
 * @param  {String}   url         接口地址
 * @param  {Object}   params      請求的參數
 * @param  {Object}   sourceObj   來源對象
 * @param  {Function} successFun  接口調用成功返回的回調函數
 * @param  {Function} failFun     接口調用失敗的回調函數
 * @param  {Function} completeFun 接口調用結束的回調函數(調用成功、失敗都會執行)
 */
function requestGetApi(url, params, sourceObj, successFun, failFun, completeFun) {
    requestApi(url, params, 'GET', sourceObj, successFun, failFun, completeFun)
}
/**
 * 請求API
 * @param  {String}   url         接口地址
 * @param  {Object}   params      請求的參數
 * @param  {String}   method      請求類型
 * @param  {Object}   sourceObj   來源對象
 * @param  {Function} successFun  接口調用成功返回的回調函數
 * @param  {Function} failFun     接口調用失敗的回調函數
 * @param  {Function} completeFun 接口調用結束的回調函數(調用成功、失敗都會執行)
 */
function requestApi(url, params, method, sourceObj, successFun, failFun, completeFun) {
    if (method == 'POST') {
        var contentType = 'application/x-www-form-urlencoded'
    } else {
        var contentType = 'application/json'
    }
    wx.request({
        url:    url,
        method: method,
        data:   params,
        header: {'Content-Type': contentType},
        success: function (res) {
            typeof successFun  == 'function' && successFun(res.data, sourceObj)
        },
        fail: function (res) {
            typeof failFun     == 'function' && failFun(res.data, sourceObj)
        },
        complete: function (res) {
            typeof completeFun == 'function' && completeFun(res.data, sourceObj)
        }
    })
}
module.exports = { 
    requestPostApi,
    requestGetApi
}

使用第一步

在app.js中引入封裝的文件const request = require(‘./utils/request.js’) ，而後定義接口域名apiUrl: ‘https://www.geekxz.com‘,

/**
 * @desc    簡單API請求示例
 */
const request = require('./utils/request.js')
App({
  request: request,
  getUserInfo:function(cb){
    var that = this
    if(this.globalData.userInfo){
      typeof cb == "function" && cb(this.globalData.userInfo)
    }else{
      //調用登陸接口
      wx.login({
        success: function () {
          wx.getUserInfo({
            success: function (res) {
              that.globalData.userInfo = res.userInfo
              typeof cb == "function" && cb(that.globalData.userInfo)
            }
          })
        }
      })
    }
  },
  /**
   * 定義的接口域名
   */
  apiUrl: 'https://www.geekxz.com',
  globalData:{
    userInfo:null
  }
})

調用封裝好的方法

var app = getApp()
Page({
  /**
   * 存儲頁面數據
   */
  data: {
      expressData : {},
  },
  /**
   * 接口調用成功處理
   */
  successFun: function(res, selfObj) {
      selfObj.setData({
          expressData : res,
      })
  },
  /**
   * 接口調用失敗處理
   */
  failFun: function(res, selfObj) {
      console.log('failFun', res)
  },
  /**
   * 頁面加載時初始化數據
   */
  onLoad: function() {
      var url     = app.apiUrl+'/query'
      var params  = {
          type   : 'zhongtong',
          postid : '424621263550',
      }
      //@todo 網絡請求API數據
      app.request.requestGetApi(url, params, this, this.successFun, this.failFun)
  }
})

.