小程序学习笔记-请求接口

微信小程序请求接口

官方给出的接口叫做wx.request，请求方式比较简单，下面是官网给出的请求实例。

wx.request({
  url: 'test.php', //仅为示例，并非真实的接口地址
  data: {
     x: '' ,
     y: ''
  },
  header: {
      'content-type': 'application/json'
  },
  success: function(res) {
    console.log(res.data)
  }
})

• url：请求的接口地址
• data：请求参数
• header：请求头，包括host、User-Agent、Accept、Accpt-Language、Referer等
• method：请求方式：POST/GET
• success：当接口请求成功时，小程序就会自动触发这个函数，获取的是从服务器返回的数据（json）。请求成功后获取到的数据就是success函数的参数result。
• fail：当接口调用失败时，小程序就会触发这个函数，返回错误信息
• complete：接口调用结束的回调函数(调用成功、失败都会执行),通过that.setData将数据传递给WXML页面。

onLoad: function (options) {
    //onLoad方法，页面只加载一次。
    //onShow方法每次页面显示都会执行。
        wx.showToast({ //显示消息提示框  此处是提升用户体验的作用
            title: '数据加载中',
            icon: 'loading',
        });
        wx.request({
            url: 'test/test', //请求接口的url
            method: 'GET', //请求方式
            data: {},//请求参数格式为json
            header: {
                'content-type': 'application/json' // 默认值
            },
            complete() {  //请求结束后隐藏 loading 提示框
                wx.hideLoading();
            },
            success: res => {
                this.setData({
                    data: res.data,
                })
            }
        });
    });
setData 函数用于将数据从逻辑层发送到视图层，同时改变对应的 this.data 的值。 
setData() 参数格式 ：
以key,value的形式表示将this.data 中的 key 对应的值改变成 value。 
其中 key 可以非常灵活，以数据路径的形式给出，如 array[2].message，a.b.c.d，并且不需要在 this.data 中预先定义。 
注意： 
直接修改 this.data 而不调用 this.setData 是无法改变页面的状态的，还会造成数据不一致 。
单次设置的数据不能超过1024kB，请尽量避免一次设置过多的数据。

post请求，参数为键值对格式(参数内容类型为x-www-form-urlencoded)

wx.request({
      url: 'http://192.168.1.103/yiji/skillList.php',
      method: 'POST',
      data:'pageSize=1&pageNum=10',    //参数为键值对字符串
      header: {
        //设置参数内容类型为x-www-form-urlencoded
        'content-type':'application/x-www-form-urlencoded',
        'Accept': 'application/json'
      },
      success: function (res) {
        console.log(res.data)
        that.setData({
          items: res.data
        })
      }
    })

wx.request请求回来的数据没有及时显示到页面上

onLoad: function () {
      var that = this;
      wx.request({
        url:app.globalData.url.api.home,
        success: function(res) {
            var matchsFirst = xxx;
            var matchsSecond= xxx;
            var matchsLast= xxx;
            //这样直接赋值并不会把数据渲染到页面上的 
            that.data.matchsFirst=matchsFirst;
            that.data.matchsSecond=matchsSecond;
            that.data.matchsLast=matchsLast;
        }});
    };
    //应该安这种方式赋值
    that.setData({
          matchsFirst:matchsFirst,
          matchsSecond:matchsSecond,
          matchsLast:matchsLast
        });