微信小程序HTTP請求封裝

微信小程序HTTP請求封裝

最近做的事情有些許的亂，一會兒Android，一會兒Ionic，一會又微信小程序。現在又要搞一個微信小程序，需要用到HTTP請求，好吧，其實只要不是單機小遊戲，都會用到HTTP請求，微信小程序官方提供了HTTP請求的方法，其實封裝的很好了，直接用就行，但是還是在封裝一次吧，好維護一點。

HTTP請求封裝

首先在page文件夾下創建一個js文件夾存放封裝的http請求，其實放哪裏看自己需要，都行。
在js文件夾下創建一個http.js文件，裏面是封裝好的http請求代碼，其實叫啥名都行，看你心情。
裏面封裝的代碼是這個樣子的：

/**
 * TODO http請求封裝
 * 王佳偉
 * 2020年3月19日13:43:48
 */

// 配置文件
const config = require('./config.js')
var app = getApp();
const host = config.httpServer; // 服務器baseUrl

/**
 * POST請求，
 * URL：接口
 * postData：參數，json類型
 * doSuccess：成功的回調函數
 * doFail：失敗的回調函數
 */
function postData(url, postData, doSuccess, doFail) {
  wx.request({
    //項目的真正接口，通過字符串拼接方式實現
    url: host + url,
    // 這個header根據你的實際改！
    header: {
      'Content-Type': 'application/json',
      'cookie': config.httpToken,
      'Request-Origin': 'app'
    },
    data: postData,
    method: 'POST',
    success: function (res) {
      //參數值爲res.data,直接將返回的數據傳入
      if (res.data.result.token) { // 如果有token保存下來，下次請求帶着token訪問
        config.httpToken = res.data.result.token;
        console.log("token--> ", config.httpToken)
      }
      doSuccess(res.data);
    },
    fail: function () {
      doFail();
    },
  })
}

/**
 * GET請求，
 * URL：接口
 * getData：參數，json類型
 * doSuccess：成功的回調函數
 * doFail：失敗的回調函數
 */
function getData(url, getData, doSuccess, doFail) {
  wx.request({
    url: host + url,
    header: {
      'Content-Type': 'application/json',
      'X-Access-Token': config.httpToken,
      'Request-Origin': 'app'
    },
    method: 'GET',
    data: getData,
    success: function (res) {
      doSuccess(res.data);
    },
    fail: function () {
      doFail();
    },
  })
}

/**
 * module.exports用來導出代碼
 * js文件中通過var http = require("../util/request.js")  加載
 * 在引入引入文件的時候"  "裏面的內容通過../../../這種類型，小程序的編譯器會自動提示，因爲你可能
 * 項目目錄不止一級，不同的js文件對應的工具類的位置不一樣
 */
module.exports.postData = postData;
module.exports.getData = getData;

裏面使用了一個配置文件config.js，我把請求的服務器的BaseUrl放進去了，方便維護，config.js文件長下面這樣：

module.exports = {
  httpServer: "http://localhost",  // 業務服務器地址 每個人的不一樣，按照需要改！
  httpToken: null,  // 存放業務服務器提供的 token 
}

HTTP 使用

首先在需要使用HTTP請求的地方引入。

var http = require('../js/http.js')   // 每個人的路徑不一樣，按照自己的改

GET請求

http.getData('/getList', {}, (rep) => {
      console.log(rep)
    }, (error) => {
      console.log(error)
})

POST請求

     let canshu = {
      'username': 'wjw',
      'password': 'wjw'
    }
    http.postData('/login',canshu,(rep)=>{
      if (rep.status && rep.status != 200) {
        return;
      }
      console.log(rep);
    })

好，就這樣吧！