小程式HTTPS 網絡請求wx.request封裝

小程式向背景發送網絡請求wx.request封裝方法

說明

當微信小程式前端向背景發送請求較多時，可以将請求方法封裝起來，使代碼更簡潔且友善管理。

小程式HTTPS 網絡請求wx.request（官方文檔）

官方示例代碼：

wx.request({
  url: 'test.php', // 僅為示例，并非真實的接口位址
  data: {
    x: '',
    y: ''
  },
  header: {
    'content-type': 'application/json' // 預設值
  },
  success(res) {
    console.log(res.data)
  }
})
           

開始

1. util檔案夾下建立檔案api.js

   

所有請求接口都寫在這裡面，還有封裝的具體方法，以及其他檔案調用需的子產品接口

1. 封裝代碼

   api.js

const App = getApp();
const URL = App.globalData.URL;		//請求位址相同的部分寫在app.js的globalData中

/** 擷取文章清單 */
const getListArticle = (params) => {
  wxRequest(params, `${URL}/article/getListArticle`,true);
};

/** 添加評論 */
const insertComment = (params) => {
  wxRequest(params, `${URL}/comment/insertComment`,true);
};

/*有其他接口可以在這裡繼續添加*/

//加入判斷标記mark.需要判斷mark為true,不需要判斷mark為flase
const wxRequest = (params, url, mark) => {
  if (mark) {	//如果需要判斷
    var value = wx.getStorageSync('sessionId')	//這裡的sessionId是登入時傳回的，存在storage中。
    console.log("-----------本地緩存的資料 sessionId----------------")
    console.log(value)

    //從緩存裡拿到sessionId，如果存在則繼續，不存在則跳轉授權登入頁面
    if (value == '') {
      //攔截需要登入的請求跳轉登入頁面，不需要登入的請求正常通路
      if (getCurrentPages()[getCurrentPages().length - 1].route != "pages/authorization/authorization"){	//如果目前頁已經是授權登入頁面就不用跳轉了
        wx.navigateTo({
          url: '/pages/authorization/authorization'
        })
      }
    }
  }
  
  //wx.request請求
  wx.request({
    url,
    method: params.method || 'GET',		//預設為‘GET’
    data: params.data || {},		//預設為空
    header: {
      Accept: 'application/json',
      'Content-Type': 'application/json',
    },
    //收到開發者伺服器成功傳回的回調函數
    success(res) {
      if (params.success) {
        params.success(res);
        console.log(res)
      }
    },
    //接口調用失敗的回調函數
    fail(res) {
      if (params.fail) {
        params.fail(res);
        console.log(res)
      }
    },
    //接口調用結束的回調函數（調用成功、失敗都會執行）
    complete(res) {
      if (params.complete) {
        params.complete(res);
        console.log(res)
      }
    },
  });
};

module.exports = {
  getListArticle,        //擷取文章清單
  insertComment,        //添加評論
};
           

app.js中

globalData: {
  userInfo: null,
  URL: 'http://localhost:8080/DoctorRBQ',
}
           

1. 調用代碼

const App = getApp();
const api = require('../../utils/api.js')

Page({
  data: {
    articleList: [],                    //文章清單
  },

  onLoad: function () {

  },

  //擷取文章清單
  getListArticle: function (e) {
    var that = this;
    const data = {		//需傳遞的參數
      sessionId: wx.getStorageSync('sessionId'),
      doctor_id: 1,
      "page.pageSize": 1,
      "page.currentPage": 1,
    }
    const method = 'GET'		//HTTP請求方法（這裡不寫也行，因為預設就是‘get’）
    api.getListArticle({		//調用接口
      method,
      data,
      success: (res) => {		//接收到伺服器傳回
        var searchData = res.data
        //成功後 擷取自己伺服器傳回的結果
        if (searchData.state == 0) {	//判斷傳回狀态碼
          console.log('擷取文章清單成功')
          that.setData({
            articleList: searchData.data.articlelist,
          })
        } else {
          console.log('擷取文章清單失敗')
        }
      },
      fail: (res) => {
        console.log("擷取文章清單接口調用失敗")
      }
    })
  },

  /**
    * 生命周期函數--監聽頁面顯示
    */
  onShow: function () {
    this.getListArticle()
  },

})
           

wx.request回調函數

• 隻要成功接收到伺服器傳回，無論 statusCode 是多少，都會進入 success 回調。請開發者根據業務邏輯對傳回值進行判斷。

拓展

java背景傳回帶狀态碼的json格式Http請求