微信小程序wx.request的簡單封裝

前言

之前寫小程序，每次請求后台時都直接調用原生的API，wx.request，每次都要寫url，data，回調函數等，正好前段時間，小程序項目需要添加新內容，趁此機會，做一個封裝的請求工具，比較簡單。

本文若有出入，請指正——來自小渣渣的顫抖
客官可移步小站看本文http://fanjiajia.cn/2019/07/06/wxxcx/flx1/

原生的API

首先看看原生的api，wx.request需要寫如下東西：

wx.request({
      url: '', // url地址
      // 參數
      data:{ 

      },
      method:'', // post || get
      success: res=> {
      // 請求成功回調函數，res為回調參數

      },
      fail:res=> {
        // 請求失敗回調函數，res為回調參數
      }
    })

每次網絡請求都需要寫這些內容，其實在實際項目中，大多情況下url都是由基地址+請求模塊構成，比如https://woshigecainiao.com/myservice/login， 這里基地址為：https://woshigecainiao.com/myservice/， 模塊為/login。 基地址一般都不會變，method通常也是約定好的，一律post或者get等，fail回調一般都會統一處理，所以不同的是參數data，和請求成功后的處理。

實現

在util目錄下新建NetAPI.js

const config = require ("../config.js") // 域名配置等
const request = (url, data, showLoading) => {
  let _url = config.baseurl + url;
  return new Promise((resolve, reject)=> {
    // 由調用者控制是否需要顯示加載對話框
    if (showLoading){
      wx.showLoading({
        title: '加載中',
        mask: true
      })
    }
    wx.request({
      url: _url,
      method: 'post',
      data: data,
      success(res) {
        // console.error(res)
        wx.hideLoading();
        resolve(res.data)
      },
      fail(err) {
        console.error('網絡請求失敗',err)
        wx.hideLoading();
        wx.showModal({
          title: '提示',
          content: '網絡請求失敗',
          showCancel: false
        })
      }
    })
  })
}
module.exports = {
  // 此處調用可直接使用NetAPI.VehicleResManager(data).then(...)，第二個參數showLoading采用缺省，即默認使用加載，調用給false，即可屏蔽默認的加載框，js不支持方法重載，也是沒辦法
  VehicleResManager: (data, showLoading) => { 
    return request(config.CLYYQuery, data, showLoading == undefined ? true : showLoading)
  }
}

這里我導入了config.js文件，其中配置了后台服務器的ip和后台請求基地址和請求模塊地址等，這樣便於統一管理，只需要在config中配置，NetAPI中調用即可，NetAPI中不關心具體的url。

const request = (url, data, showLoading) => {...}

• url：后台不同模塊的入口，比如login等這樣的模塊
• data：請求所需要的參數data
• showLoading：發起網絡請求是否需要顯示加載對話框的控制開關
  以我這里的例子為例，我最后暴露除了VehicleResManager,即車輛預約管理模塊，所對應了后台模塊地址卸載config中config.CLYYQuery，這樣，在page的js中只需要簡單的調用暴露的相關入口即可。

調用

在某個page中首先導入該工具

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

調用處：

NetAPI.VehicleResManager(data, that.data.curPage == 0).then(res => {...}

res即為請求返回數據，不包含網絡狀態等，因為在工具中resolve(res.data)中直接返回的是返回體的data部分。

這里關於Promise就不說了

最后

此致，敬禮