按照我写的Demo阐述下,三种方法都可以,看各自的需求使用吧
- 方式一: 以点击事件的形式 :
// 其他页面内容就不展示了,按照自己的结构去渲染数据 <button type="button" bindtap="test">点击请求接口</button >
Page({ data: { // 接收请求过来的数据 listDate: '' } }); test() { // 为确保this指向不发生改变,可以固定下this指向 //使用this的时候用that代替即可 var that = this wx.request({ // 注意,如果小程序开启校验合法域名时必须使用https协议 //在测试的情况下可以不开启域名校验 url: '这里是要请求接口的地址', data: { // 接口设置的固定参数值 canOne: '1', canTwo: '2' ... }, // 请求的方法 method: 'GET', // 或 ‘POST’ // 设置请求头,不能设置 Referer header: { 'content-type': 'application/json' // 默认值 }, // 请求成功时的处理 success: function (res) { // 一般在这一打印下看看是否拿到数据 console.log(res.data) if (res.statusCode == 200) { var array = res.data that.setData({ // 将res.data保存在listDate方便我们去循环遍历 listDate: res.data // 统计所有数据 deviceNum: array.length }) } }, // 请求失败时的一些处理 fail: function () { wx.showToast({ icon: "none", mask: true, title: "接口调用失败,请稍后再试。", }); } }) }
- 方式二:在onLoad函数中
/** * 生命周期函数--监听页面加载 */ onLoad: function (options) { // 可以将上面`test`方法中的代码直接写在onLoad生命周期函数 //等页面加载完就可以自动请求接口,获取数据 },
- 方式三:使用方法调用的形式,定义一个方法如上面的
test方法
将网络请求放在其中,然后在onLoad
中调用,这也是在开发中经常用到的形式,更显得代码规范,易维护。/** * 生命周期函数--监听页面加载 */ onLoad: function (options) { // 可以将上面的test视为一个方法,然后在onLoad生命周期函数中调用 //和方式二一样就不用绑定点击事件了 this.test() },
PS:使用这种方式都后期需要更改接口公共路径,比如:更改接口域名的时候会显得非常麻烦,每个接口都需要找出来进行更改,既然如此麻烦那不如封装下request请求,将请求接口的公共路径单独拿出来,到后期需要更改的时候只需要更改公共路径就可以了。