小程序開發——統一請求方法

通常咱們習慣將請求接口的方法統一塊兒來，變成公共方法
可是在小程序中，彷佛遇到了一些問題，官方給的示例是：

this.setData({
    name: 'MINA'
})

this侷限了請求的地方，彷佛只能在每一個業務頁面內，setData方法的參數不夠配置化
如下是我參考一些資料以後獲得的解決方案

util.js

var apiHost = ".....";

//url添加最後的相對路徑便可
function getRequest(url, that, targetName) {
  wx.request({
    url: apiHost + url,
    method: 'GET',
    header: {
      'content-type': 'application/json' // 默認值
    },
    success: function (res) {
      var param = {};
      param[targetName] = res.data;
      that.setData(param);
    },
    fail: function (error) {
      console.log(error);
    }
  })
}

function postRequest(url, data, that, targetName ) {
  var token='你的令牌';   //好比存儲在Storage中
  wx.request({
        url: apiHost + url,
        data: data,
        method: 'POST',
        header: {
            'content-type': 'application/json', // 默認值
            'Authorization': "Bearer " + token
        },
        success: function (res) {
            var param = {};
            param[targetName] = res.data;
            that.setData(param);
        },
        fail: function (error) {
            console.log(error);
        }
    })
}

module.exports.getRequest = getRequest;
module.exports.postRequest = postRequest;

調用api

const util = require('../../utils/util.js')

Page({
  data: {
    logInResult:{},
    sessionKey:"",
  },
  logIn:function(e){
    //登陸某系統
    util.postRequest('/Account/LogInForMiniProgram', { "UserName": this.data.userName, "Password": this.data.password }, this, "logInResult");
  },
  wxLogInAndGetSessionKey: function (e) {
    //注意做用域，此處，在wx的方法裏面拿到的this不對（http://jsrocks.org/cn/2014/10/arrow-functions-and-their-scope）
    var that = this;
    wx.login({
      success: function (res) {
        console.log(res)
        if (res.code) {
          //調用後端接口得到sessionkey
          util.postRequest('/AccountForMiniProgram/WechatGetSessionKey', { id: res.code }, that, "sessionKey");
        } else {
          console.log('登陸失敗！' + res.errMsg)
        }
      }
    });
  },
  onLoad: function () {
  }
})

示例代碼

示例代碼