小程序系列之網絡請求

小程序系列之網絡請求

本文首發於個人我的公衆號

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

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

配置域名

首先，進入項目配置界面，設置網絡請求域名。界面以下：

點擊"開發設置"

把 要請求的接口添加進去。本文使用鴻神的wanandroid 接口演示。

請求數據

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

wx.request({
      url: 'https://www.wanandroid.com/article/list/0/json',

      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信息。

請求成功返回的參數。

參數名	類型	描述
data	Object/String	開發者服務器返回的數據
statusCode	Number	開發者服務器返回的 HTTP 狀態碼
header	Object	開發者服務器返回的 HTTP Response Header

這裏要注意一點，只要成功收到服務器返回，不管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: 'https://test.com/postdata',

  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: 'https://www.wanandroid.com/article/list/0/json',

      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}}。

效果圖

推薦閱讀

Android開發人員學習小程序系列之組件位置

---