微信小程序开发极简入门(七):HTTP请求

生产环境下，微信小程序是强制要求HTTPS请求的，还要配白名单。我们是开发环境，所以就无所谓了。

服务端写俩接口，供调试用。

Page({
  data: {
    userInfo: {
      "userId": "",
      "name": "",
      "age": 0
    }
  },
  //GET请求
  getUser(){
    wx.request({
      url: '接口URL',
      header:{
        "token":"jwt-token"//这里可以放TOKEN
      },
      data:{
        userId:"111"//请求参数
      },
      success: (res) => {
        this.setData({
          userInfo: res.data.data
        })
      },
      fail: (res) => {
        wx.showToast({
          title: '系统错误'
        })
        this.setData({
          userInfo: {
            userId: "xxx0",
            name: "xxx",
            age: -99
          }
        })
      }
    })
  },
  //POST请求
  postUser() {
    var that = this
    wx.request({
      url: '接口URL',
      data: {
        name: "张三",
        age: 28
      },
      method: "POST"
      success: (res) => {
        console.log(res.data)
        this.setData({
          userInfo: res.data.data
        })
      },
      fail(res) {
        wx.showToast({
          title: '系统错误'
        })
        that.setData({
          userInfo: {
            userId: "xxx0",
            name: "xxx",
            age: -99
          }
        })
      }
    })
  }
})

重点说一下：

• HTTP请求方法很多，本文只写GET、POST。
• method：默认GET，POST请求必须加上。
• header：可以设置TOKEN。
• 其中content-type默认是application/json。如果服务端的post请求接口格式要求是form提交，就需要加上 content-type:application/x-www-form-urlencoded。
• data：不管是Get、Post请求，请求格式是什么样，一律写成json格式。
• 响应回写：绝大部分HTTP请求，都会将响应结果回写到data里，这里有点小特殊。注意看Get、Post请求的success、fail方法的写法。
• 回写至data，写法是this.setData()，但是如果使用：

success(res){
  this.setData({userInfo:res.data.data})
}

会报

Cannot read property 'setData' of undefined

这是因为success(res)或者success:function(res)这种写法里面的this，指向闭包，而不是page对象，自然就没有setData这个方法，也实现不了数据回写的功能。

解决方法有三：

一、箭头函数。

success:(res)=>{
 this.setData({userInfo:res.data.data})
}

ES6规定箭头函数没有自己的this，其内部的this就指向外层的this，也即page的this，就可以使用setData。

二、this再定义。

var that = this; 
success(res){
 that.setData({
  userInfo:res.data.data
 })
}

在函数外把this再定义一次，然后在函数内部使用。

三、取当前Page。

success:function(res){
  var pages=getCurrentPages();
  var page=pages[pages.length-1];
  page.setData({userInfo:res.data.data});
}

getCurrentPages()是获取当前页面栈数组，第一个是首页，最后一个是当前页。

pages[pages.length-1]获取的就是当前的page。

另外：

• 上传、下载就不写了，现在一般都用云服务的OSS了，大家用到了就看官方文档即可。
• WebSocket。我看了不少资料，也可能是我能力不足，没找到相对完美的微信小程序的WebSocket使用STOMP的实现。现在服务端通常都是用STOMP协议，如果小程序纯用WebSocket，要手工对STOMP协议进行构建、解析，这个工程量不小，个人实在没时间搞了。
• 多说一点自己不成熟的看法。WebSocket通常的应用场景，例如聊天、消息推送、物联网，在微信小程序上其实是用不上的。谁会在微信客户端里面再开发一个聊天软件呢。至于消息推送，微信提供了模板消息接口。而物联网，应该没人用微信小程序开发物联网的程序吧。至于游戏、协同办公软件不在本人的研究范围内~~不谈了。