在微信小程序开发中，数据请求是实现丰富功能的关键环节。本文将带你深入了解小程序数据请求的相关知识，包括请求限制、配置方法以及不同请求方式的实现，还会介绍如何在页面加载时自动请求数据，同时附上详细代码示例，让你轻松掌握小程序数据请求技巧。
一、小程序数据请求的限制
（一）仅支持 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 请求，获取所需数据。
