小程序---調用後端接口的方法
阿新 • • 發佈：2019-03-26
信息 post請求 .sh 項目 數據 通過 shuff 我只 shuf
學習小程序一段時間了，寫頁面對我來說沒有任何問題。最近學習如何請求後端接口，本來想請求項目中正在用的接口，可是無緣，微信小程序不允許。官方給出的提示是，接口必須有域名且備案，我就無語了，我們的接口都是ip地址，所以我只能呵呵了。不過，也沒太大關系，重點是學習方法。下面，我簡單說一下官方給出的請求接口的方法。
一、官方方法
此方法簡單易懂，但是在使用時代碼量過大，我建議還是封裝一下比較好用。
1 wx.request({ 2 url: ‘test.php‘, // 僅為示例，並非真實的接口地址 3 data: { 4 x: ‘‘, 5 y: ‘‘ 6}, 7 header: { 8 ‘content-type‘: ‘application/json‘ // 默認值 9 }, 10 success(res) { 11 console.log(res.data) 12 } 13 })
二、請求方法封裝（新建文件夾util，工具文件，在文件夾下創建request.js文件，用於對方法封裝）request.js如下：
1 var app = getApp(); 2 //項目URL相同部分，減輕代碼量，同時方便項目遷移 3 //這裏因為我是本地調試，所以host不規範，實際上應該是你備案的域名信息4 var host = ‘http://localhost:8081/demo/‘; 5 6 /** 7 * POST請求， 8 * URL：接口 9 * postData：參數，json類型 10 * doSuccess：成功的回調函數 11 * doFail：失敗的回調函數 12 */ 13 function request(url, postData, doSuccess, doFail) { 14 wx.request({ 15 //項目的真正接口，通過字符串拼接方式實現 16 url: host + url, 17 header: {18 "content-type": "application/json;charset=UTF-8" 19 }, 20 data: postData, 21 method: ‘POST‘, 22 success: function (res) { 23 //參數值為res.data,直接將返回的數據傳入 24 doSuccess(res.data); 25 }, 26 fail: function () { 27 doFail(); 28 }, 29 }) 30 } 31 32 //GET請求，不需傳參，直接URL調用， 33 function getData(url, doSuccess, doFail) { 34 wx.request({ 35 url: host + url, 36 header: { 37 "content-type": "application/json;charset=UTF-8" 38 }, 39 method: ‘GET‘, 40 success: function (res) { 41 doSuccess(res.data); 42 }, 43 fail: function () { 44 doFail(); 45 }, 46 }) 47 } 48 49 /** 50 * module.exports用來導出代碼 51 * js文件中通過var call = require("../util/request.js") 加載 52 * 在引入引入文件的時候" "裏面的內容通過../../../這種類型，小程序的編譯器會自動提示，因為你可能 53 * 項目目錄不止一級，不同的js文件對應的工具類的位置不一樣 54 */ 55 module.exports.request = request; 56 module.exports.getData = getData;
三、在page裏面創建一個文件夾，創建四種文件，在js裏面加入
1 //引入代碼 2 var call = require("../util/request.js") 3 4 Page({ 5 data: { 6 pictureList: [], 7 }, 8 9 onLoad: function () { 10 var that = this; 11 //調用封裝的方法，為了方便我直接在頁面加載的時候執行這個方法 12 call.getData(‘lunbo.do‘, this.shuffleSuc, this.fail); 15 }, 16 shuffleSuc: function (data) { 17 var that = this; 18 that.setData({ 19 pictureList: data.rows 20 }) 21 //我後面測試了一下，直接this.setData也可以，但是因為我在沒有使用封裝方法的時候 22 //this.setData報過錯，不能直接用this，所以我在賦值的時候一般都會加上var that = this; 23 //這句話算是一個不是習慣的習慣 24 }, 25 fail: function () { 26 console.log("失敗") 27 }, 28 })
將回調函數寫在page裏面，在調用封裝方法的時候通過this.方法名調用，這樣就能確保that.setData方法有效。
小程序---調用後端接口的方法