微信小程序request請求實例，網絡請求。

最近微信小程序開始開放測試了，小程序提供了很多api，極大的方便了開發者，其中網絡請求api是wx.request(object)，這是小程序與開發者的服務器實現數據交互的一個很重要的api。

官方參數說明如下

 

OBJECT參數說明：

參數名	類型	必填	說明
url	String	是	開發者服務器接口地址
data	Object、String	否	請求的參數
header	Object	否	設置請求的 header , header 中不能設置 Referer
method	String	否	默認為 GET，有效值：OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
success	Function	否	收到開發者服務成功返回的回調函數，res = {data: '開發者服務器返回的內容'}
fail	Function	否	接口調用失敗的回調函數
complete	Function	否	接口調用結束的回調函數（調用成功、失敗都會執行）

最簡單的用法如下（以POST請求為例）

 

 bindSearchChange:function(e){
    var keyword = e.detail.value;
    wx.request({
      url:'xxxxxxxxx',
      data:{},
      header: {'Content-Type': 'application/json'},
      success: function(res) {
        console.log(res)
      }
    })
  }

下面我們把請求寫在service文件下的http.js文件中，代碼如下

 

var rootDocment = 'hxxxxx';//你的域名
function req(url,data,cb){
    wx.request({
      url: rootDocment + url,
      data: data,
      method: 'post',
      header: {'Content-Type': 'application/json'},
      success: function(res){
        return typeof cb == "function" && cb(res.data)
      },
      fail: function(){
        return typeof cb == "function" && cb(false)
      }
    })
}
 
 
module.exports = {
  req: req
}

其中module.exports是將req方法暴露出去使得別的文件中可以使用該方法，由於js函數是異步執行的，所以return 的是回調函數，而不是具體的數據

 

 

為了其他文件方便調用此方法，我們在根目錄的app.js文件中將其注冊成為全局函數，如下

//app.js
var http = require('service/http.js')
App({
  onLaunch: function () {
    //調用API從本地緩存中獲取數據
    var logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)
  },
  getUserInfo:function(cb){
    var that = this
    if(this.globalData.userInfo){
      typeof cb == "function" && cb(this.globalData.userInfo)
    }else{
      //調用登錄接口
      wx.login({
        success: function () {
          wx.getUserInfo({
            success: function (res) {
              that.globalData.userInfo = res.userInfo
              typeof cb == "function" && cb(that.globalData.userInfo)
            }
          })
        }
      })
    }
  },
  globalData:{
    userInfo:null
  },
  func:{
    req:http.req
  }
})

這時這個req就是全局的了，在調用時我們可以使用getApp.func.req()來調用，具體如下

var app = getApp()
Page({
  data: {
    
  },
  onLoad: function (opt) {
    //console.log(opt.name)
   app.func.req('/api/get_data',{},function(res){
     console.log(res)
    });
  }
})

 

微信小程序提供了很多api，包括網絡，媒體，數據等，也提供了很多組件，使開發小程序變得很方便。