小程式系列之網路請求

Android開發圈（ID：RainYang_WX）
作者：宇寶守護神（rainyang）

相較於android開發， 小程式的網路請求出乎意料的簡單。。

配置域名

首先，進入專案配置介面，設定網路請求域名。介面如下：

點選"開發設定"

把 要請求的介面新增進去。本文使用鴻神的wanandroid 介面演示。

請求資料

主要用的是wx.request();方法。

wx.request({
      url: '',

      method: 'GET',

      header: { 'content-type': 'application/json' },


      success: function(res){
        console.log(res.data)
        
      },

      fail: function (res){
      },

      complete: function (res){
      }
    })

  },

控制檯輸出：

method預設值是GET請求，資料型別預設是json格式。

透過wx.request傳送請求後，伺服器處理請求並返回HTTP包，小程式端收到回包後會觸發success回撥，同時回撥會帶上一個Object資訊。

請求成功返回的引數。

這裡要注意一點，只要成功收到伺服器返回，無論HTTP狀態碼是多少都會進入success回撥。也就是說狀態碼是200，會走success回撥，狀態碼是404也會走success回撥，所以這裡需要開發者自己做最佳化判斷。

如果是post請求，需要上傳引數，可以data{}。例如：

請求的包體為 {"a":{"b":[1,2,3],"c":{"d":"test"}}}

程式碼實現：

// 請求的包體為 {"a":{"b":[1,2,3],"c":{"d":"test"}}}

wx.request({

  url: '',

  method: 'POST',

  header: { 'content-type': 'application/json'},

  data: {

    a: {

      b: [1, 2, 3],

      c: { d: "test" }

    }

  },

  success: function(res) {

    console.log(res)// 伺服器回包資訊

  }

})

渲染資料

.js 檔案

onRequestNetData: function(){
    wx.showLoading();
    var t = this;
    wx.request({
      url: '',

      method: 'GET',

      header: { 'content-type': 'application/json' },

      success: function(res){
        if (res.statusCode == 200){
          t.setData({
            //把資料傳給wanAndroidDatas資料
            wanAndroidDatas: res.data.data.datas
          })
        }
      },

      fail: function (res){
        //錯誤處理
      },
      complete: function (res){
        wx.hideLoading();
      }
    })

  },

.wxml檔案

<view wx:for="{{wanAndroidDatas}}" wx:key="id">
  <text>{{item.title}}</text>

  <view style='background:#e0e3da;width:100%;height:5rpx;'></view>
</view>

<button style=' position:fixed;left:10rpx;right:10rpx;bottom:10rpx' bindtap='onRequestNetData'>RequestUrl</button>

注意點：

1.wanAndroidDatas 這個變數，不用放在page的data: {}裡。

2.{{item.title}} 別寫成了 {{wanAndroidDatas.title}}。

效果圖