1. 程式人生 > >【微信小程式】封裝網路請求並在wxml呼叫

【微信小程式】封裝網路請求並在wxml呼叫

正文:

// url:網路請求的url method:網路請求方式 data:請求引數 message:提示資訊 success:成功的回撥函式 fail:失敗的回撥
//pages/utils/util
function request(url, method, data, message, success, fail) {
  wx.showNavigationBarLoading()
  if (message != "") {
    wx.showLoading({
      title: message,
    })
  }
  wx.request({
    url: url,
    data: data,
    header: {
      
'content-type': 'application/x-www-form-urlencoded'

    },
    method: method,
    success: function (res) {
      wx.hideNavigationBarLoading()
      if (message != "") {
        wx.hideLoading()
      }
      if (res.statusCode == 200) {
        success(res.data)
      } else {
        console.log("請求成功,返回資訊:" + res.statusCode)
      }
    },
    fail: function (err) {
      wx.hideNavigationBarLoading()
      if (message != "") {
        wx.hideLoading()
      }
      console.log('請求失敗:'+err)
    },
  })
}
module.exports = {
  request: request
}

//pages/index/index
var util = require("../../utils/util.js")
Page({
  data: {
    list_data:'',
    params: { id: 1 }
  },
  onLoad: function (options) {
    var that = this
    util.request('https://127.0.0.1/Index/wellcome', 'get', this.data.params , '正在載入資料', function (res) {
      console.log("返回的資訊:"+res)
	that.setData({
	   list_data:res
	})
    }, function (err) {
      wx.showToast({
        title: '載入資料失敗',
      })
    })
  }
})

//pages/index/wxml
<view>{{list_data}}</view>