微信小程序学习笔记-2.3 wx.request

2018/5/26

1.知识了解

微信小程序自带了四种不同的请求方式

wx.request wx.uploadFile wx.downloadFile WebSocket

这里仅使用 request

wx.request 中包含了和普通 request 一样的可选择参数

url method：基础

data： 可以放入数据

header： 可以放入请求格式 比如 'Content-Type': 'application/json'

值得注意的是，wx.request 是一个异步操作。其拥有三个回调函数

success(res){} 这个函数会不论 statuscode 返回全部的服务器返回的值。

fail(){} 这个函数对访问失败后的情况作处理

complete(){} 这个函数对访问结束后的情况做处理

微信小程序访问 url 需要在 微信公众平台处进行登记。在调试过程中，也可以选择先忽略（最后一个）。

2.编写请求

继上一课。这次选择只传递 id ，让 detail 页面自行向服务器作请求获取数据

1）请求编写 serverUrl 在外侧已经定义。替换成你对应的服务器地址即可

 wx.request({

      url: serverUrl+id,
      headers: {
        'Content-Type': 'application/json'
        },
        success(res){
          console.log(res)
          that.setData({
            id: id,
            list: res.data.data
          })

        },
        fail(){

        },
        complete(){

        },
        
    })

这样就能在终端输出相应的 json 数据

注意：上面代码定义了 that 的原因是因为 js 里面的 this 指定的是当前对象

4. 动态设置导航栏 loading 状态

因为响应不可能直接完成，所以需要 loading 来让用户明白进程位置

微信提供了以下方法 （还有另外一个 showLoading 方法）

wx:wx.showNavigationBarLoading()
wx:wx.hideNavigationBarLoading()
wx:wx.setNavigationBatTitle()

由于 wx.request 请求是异步的，所以我们应该把 show 写在 wx.request 后，把 hide 写在 success 回调函数 setData后

全部代码如下：

    wx.request({


      url: serverUrl+id,
      headers: {
        'Content-Type': 'application/json'
        },
        success(res){
          console.log(res)
          that.setData({
            id: id,
            list: res.data.data
          })
          wx:wx.hideNavigationBarLoading()
        },
        fail(){

        },
        complete(){

        },
        
    })
    wx:wx.showNavigationBarLoading()

默认的 navigationTitle 可以在 json 中设置

.data.data 第一和第二个获取的值不一样。但一般来讲都是两次才能获取到正确值。