在微信小程序開發中，數據請求是實現豐富功能的關鍵環節。本文將帶你深入了解小程序數據請求的相關知識，包括請求限制、配置方法以及不同請求方式的實現，還會介紹如何在頁面加載時自動請求數據，同時附上詳細代碼示例，讓你輕松掌握小程序數據請求技巧。
一、小程序數據請求的限制
（一）僅支持 HTTPS 接口
出于安全考慮，小程序官方規定只能請求 HTTPS 類型的接口。在傳統網頁開發中，我們既可以使用普通的 HTTP 協議接口，也能使用 HTTPS 協議接口。但小程序為保障用戶數據安全，將接口請求限定為 HTTPS，這意味著開發者在選擇數據接口時，必須確保接口采用 HTTPS 協議。
（二）域名需添加到信任列表
與網頁開發直接調用 Ajax 請求接口不同，在小程序里，若要請求某個域名下的接口，必須先將該接口的域名添加到信任列表中。具體操作可通過微信開發者工具實現，點擊工具欄右上角的 “詳情” 按鈕，在彈出的右側面板中選擇 “項目配置”，找到 “request 合法域名” 選項進行設置。默認情況下，該列表為空，若未添加域名，小程序無法請求任何接口。例如，若想請求百度 API 的接口，就需要先把百度 API 對應的域名配置到 “request 合法域名” 列表里。
二、配置 request 合法域名
（一）配置步驟
- 登錄微信小程序管理后臺。
- 在左側列表中找到 “開發” 選項并點擊。
- 在右側頁面主體中，找到 “開發設置” 下的 “服務器域名”。
- 點擊 “request 合法域名” 右側的 “修改” 鏈接，通過手機微信掃碼確認身份后，在彈出的配置面板中添加所需域名。如果需要請求多個域名下的接口，可點擊 “加號” 添加。注意，域名必須是真實有效的，且只能使用 HTTPS 協議，不能使用 IP 地址或localhost。
- 填寫完域名后，點擊 “保存并提交”。此時回到微信開發者工具，點擊 “詳情”-“項目配置”，若面板自動刷新，就表明配置成功，可以請求相應域名下的接口了。
（二）注意事項
- 域名協議限制：僅支持 HTTPS 協議。
- 禁止使用特定地址：不能使用 IP 地址（如 127.0.0.1）和localhost。
- 域名備案要求：域名必須經過 ICP 備案，前端開發者只需知曉該要求，具體備案流程與后端相關。
- 修改次數限制：服務器域名一個月以內最多可以申請修改五次，使用完修改次數后，當月無法再進行修改，所以修改時需謹慎操作。
三、發起?GET 請求
在小程序中發起 GET 請求，可調用微信官方提供的wx.request方法。wx是小程序中的頂級全局對象，無需聲明即可直接調用。具體步驟如下：
- 在頁面的
.wxml文件中定義一個按鈕，用于觸發請求。
<button bindtap="getInfo">發起GET請求</button>
- 在頁面的
.js文件中定義事件處理函數，并在函數內部使用wx.request發起 GET 請求。
Page({getInfo: function() {wx.request({url: 'https://3w.escook.cn/api/get', // 請求的接口地址，需為HTTPS協議且在合法域名列表中method: 'GET', // 請求方式為GETdata: { // 發送到服務器的數據name: '張三',age: 20},success: (res) => { // 成功后的回調函數console.log(res.data); // 打印服務器返回的真實數據}});}
});點擊按鈕后，通過調試器面板的終端可查看服務器返回的數據。如果打印出的數據包含預期信息，如message: 'get'，則證明 GET 請求成功，且發送到服務器的數據也被正確返回。
四、發起 POST 請求
小程序中發起 POST 請求與 GET 請求類似，同樣使用wx.request方法，只是需要將method指定為POST。具體實現步驟如下：
- 在頁面的
.wxml文件中新增一個按鈕，并綁定對應的點擊事件。
<button bindtap="postInfo">發起POST請求</button>
- 在頁面的
.js文件中定義 POST 請求的事件處理函數。
Page({postInfo: function() {wx.request({url: 'https://3w.escook.cn/api/post', // POST請求的接口地址method: 'POST', // 請求方式為POSTdata: { // 提交到服務器的數據name: '李四',age: 33},success: (res) => { // 成功后的回調函數console.log(res.data); // 打印服務器返回的真實數據}});}
});點擊按鈕后，在調試器終端查看打印結果。若能看到包含message: 'post'以及發送的數據（如name: '李四'，age: 33），則表明 POST 請求成功。
五、頁面加載時請求數據
在很多場景下，我們希望頁面剛加載時就自動請求初始化數據。此時，可以在小程序頁面的onLoad事件中調用獲取數據的函數。例如，在home.js文件中，找到onLoad事件：
Page({onLoad: function() {this.getInfo(); // 調用GET請求函數this.postInfo(); // 調用POST請求函數},getInfo: function() {// GET請求代碼，同上文},postInfo: function() {// POST請求代碼，同上文}
});這樣，當頁面加載成功時，就會自動發起 GET 和 POST 請求，獲取所需數據。
