微信小程序请求封装及案例展示

在微信小程序中必然需要用到请求的封装，简化代码，便于整理，那怎样进行封装请求呢？

一、app.js文件（用于请求地址的整理）

module.exports = {
  memberSearch: '/welkin/wx/member/query', //会员搜索  memberSearch
  queryMemberDetail:"/welkin/wx/member/queryMemberDetail"//会员详情 queryMemberDetail
}

将用到的请求地址暴露出去

二、util.js文件（进行请求的封装promise）

//1.引入api.js
var api = require('api.js');
//2.请求封装
function requestPromise(url, param, method, contentType, tokentype) {
  if (app.globalData.nonetwork) {
    wx.hideLoading()
    wx.showModal({
      title: '提示',
      content: '当前网络不可用，请检查您的网络',
      showCancel: false
    })
    return
  }

  return new Promise((resolve, reject) => {
    /**
     * 重构部分老代码
     * @type {{"content-type": (*|string)}}
     */
    let tempHeader = {
      'content-type': contentType ? contentType : 'application/x-www-form-urlencoded',
    }

    if (tokentype != '1') {
      tempHeader['token'] = app.globalData.code
    }

    let params = {
      storeCode: app.globalData.companyShopCode,
      storeName: app.globalData.companyShop
    }

    params = Object.assign({}, params, param)

    wx.request({
      url: app.globalData.host + url,
      data: params,
      header: tempHeader,
      method: method || 'POST',
      success: function(res) {
        wx.hideLoading();
        resolve(res.data)
      },
      fail: function(res) {
        console.log('请求失败')
        wx.showToast({
          title: res.message,
          icon: 'none',
          duration: 2000
        })
        wx.hideLoading()
        reject(res)
      },
    })
  })
}
//3.暴露出去
module.exports={
    request: requestPromise,
    api: api,
}
//4.页面使用
var util = require('../../../utils/util');
getMemberDetails: function (e) {

    let that = this;
    console.log(that.data);
    let params = {
      cardNum: that.data.cardNum,
      role: that.data.userRoleCode
    };
    wx.showLoading({
      title: '加载中'
    })

    util.request(util.newapi.queryMemberDetail, params, 'POST').then(function (res) {
      wx.hideLoading();
      if (res.code === 1) {
        that.setData({
          MemberDetails: {
            ...res.data.memberInfoVO,
            cardType: res.data.cardType,
            integral: res.data.integral,
          }
        })
      } else {
        wx.showToast({
          title: res.message,
          icon: 'none',
          duration: 2000
        })
      }

    })
  },