對微信小程序網絡請求框架的再次封裝

微信小程序的網絡請求框架已經設計得很簡單易用了，它是這樣發起網絡請求的：

wx.request({
  url: 'test.php', //僅爲示例，並非真實的接口地址
  data: {
    x: '',
    y: ''
  },
  header: {
    'content-type': 'application/json' // 默認值
  },
  success (res) {
    console.log(res.data)
  }
})

但是我們最好還是要對它再進行一次封裝，因爲我們很多時候需要一個統一的網絡請求處理，比如token過期，網絡錯誤處理等等，所以我用Promise對微信的網絡請求框架做了一個簡單的封裝。把網絡請求的代碼封裝到util.js文件中，比如可以寫一個方法叫requestData:

const API_BASE_URL = 'https://api.test.com:8080'

const app = getApp()

const requestData = (path, method, data) => {
  return new Promise(function(resolve, reject) {
    var token = app.globalData.token
    if (token == null) {
      token = wx.getStorageSync('token') ? wx.getStorageSync('token') : ''
    }
    wx.request({
      url: API_BASE_URL + path,
      data: data,
      method: method,
      header: {
        'content-type': 'application/json',
        'token': token
      },
      success: function(res) {
        // cookies:"",data:"",errMsg:"request:ok",header:{Connection: "Keep-Alive", … },statusCode:200
        if (res.data.result || false) {
          resolve(res.data)
        } else {
          var e = new Object();
          if (res.data.errorCode == 30000) {
            //校驗token失效
            getNewToken()
            e.errMsg = "登錄失效，請刷新重試"
          } else if (res.data.errorCode == 30001) {
            //沒有綁定手機號
            bindPhone()
            e.errMsg = "尚未綁定手機號"
          } else {
            e.errMsg = res.data.message || "請求失敗"
          }
          reject(e)
        }
      },
      fail: function(e) {
        //e = { errMsg: "request:fail invalid url" }
        e.errMsg = "網絡請求失敗"
        reject(e)
      }
    })
  })
}

再定義一下get 和 post 方法，然後export出來：

function getData(path, data) {
  return requestData(path, 'GET', data)
}

function postData(path, data) {
  return requestData(path, 'POST', data)
}


module.exports = {
  GET: getData,
  POST: postData
}

然後在需要用到網絡請求的js文件中引入即可

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

submit: function(e) {
    wx.showLoading({
      title: '提交中...',
    });
    API.POST("/room/visit", {
      visitTime: '2019-06-01 18:00:00',
      roomId: this.data.room.roomId,
      visitorName: name,
      visitorPhone: phone
    }).then(res => {//數據請求成功
      wx.hideLoading();
      wx.showToast({
        title: '預約成功'
      })
    }).catch(res => {//數據請求失敗
      wx.hideLoading();
      wx.showToast({
        title: res.errMsg,
        icon: 'none'
      })
    });
  },

這個網絡工具類還有上傳圖片和批量上傳圖片等功能，完整文件請訪問：

https://github.com/tigerchou/mputils