WeChat applet implements a code example of simple encapsulation of network requests-Mini Program Development-php.cn

WeChat applet implements a code example of simple encapsulation of network requests

黄舟

Release： 2017-09-13 11:17:57

Original

3042 people have browsed it

This article mainly introduces the relevant information on the detailed explanation of simple encapsulation examples of network requests in WeChat mini programs. Friends in need can refer to

Detailed explanations of simple encapsulation examples of network requests in WeChat mini programs

Implementing network requests in WeChat applet is much simpler than Android. We only need to use the API provided by it to solve the network request problem.

Normal HTTPS request (wx.request)
Upload file (wx.uploadFile)
Download file (wx.downloadFile)
##WebSocket communication (wx.connectSocket)

"networkTimeout": {
  "request": 5000,
  "connectSocket": 5000,
  "uploadFile": 5000,
  "downloadFile": 5000
 }

Copy after login

After setting the timeout, we start to encapsulate network requests. The network requests we usually come into contact with are generally divided into two categories. One type is run in the background. , there is no loading dialog box prompt, the other is that there is a prompt, such as the prompt is loading data, then we use this as a clue to encapsulate. First create a network request tool class for the network, and then

// 展示进度条的网络请求
// url:网络请求的url
// params:请求参数
// message:进度条的提示信息
// success:成功的回调函数
// fail：失败的回调
function requestLoading(url, params, message, success, fail) {
 console.log(params)
  wx.showLoading({
   title: message,
  })
 wx.request({
  url: url,
  data: params,
  header: {
   &#39;content-type&#39;: &#39;application/x-www-form-urlencoded&#39;
  },
  method: &#39;post&#39;,
  success: function (res) {
   //console.log(res.data)
    wx.hideLoading()
   if (res.statusCode == 200) {
    success(res.data)
   } else {
    fail()
   }

  },
  fail: function (res) {
    wx.hideLoading()
    fail()
  },
  complete: function (res) {

  },
 })
}

Copy after login

The above function is easy to understand. The meaning of the parameters has been explained in the code. Before the network request starts, it is displayed first Loading dialog box prompts the user that the current network is requesting data. When the network request succeeds or fails, call wx.hideLoading() to cancel the display of the prompt box. The api also provides wx.showNavigationBarLoading() to display the navigation bar loading animation of the current page. If we want to display this animation, we can call wx.showNavigationBarLoading() at the beginning of requestLoading execution, and then call it after the network request succeeds or fails. wx.hideNavigationBarLoading() hides the navigation bar loading animation.

When the network request is successful and the status code is 200, the requested data is called back to our method through success(res.data). We have not broken down the reasons for the failure above. Of course, you can also You can add a parameter to the failure callback to prompt the user for the reason for the failure. For example, if

res.statusCode ==500

prompts an internal server error, if res.statusCode ==-1 prompts you to check the network, res. statusCode ==404, address not found, etc.
Then we create a request function that does not display the dialog box and requests data from the user background. In order to write less code, we share the above function, as follows

//不显示对话框的请求
function request(url, params, success, fail) {
 this.requestLoading(url, params, "", success, fail)
}

Copy after login

We see that we still call requestLoading in the end, so we can make a judgment in this function. If the prompt message message=='' is displayed, the dialog box will not be displayed.

The final code

function request(url, params, success, fail) {
 this.requestLoading(url, params, "", success, fail)
}
// 展示进度条的网络请求
// url:网络请求的url
// params:请求参数
// message:进度条的提示信息
// success:成功的回调函数
// fail：失败的回调
function requestLoading(url, params, message, success, fail) {
 console.log(params)
 wx.showNavigationBarLoading()
 if (message != "") {
  wx.showLoading({
   title: message,
  })
 }
 wx.request({
  url: url,
  data: params,
  header: {
   //&#39;Content-Type&#39;: &#39;application/json&#39;
   &#39;content-type&#39;: &#39;application/x-www-form-urlencoded&#39;
  },
  method: &#39;post&#39;,
  success: function (res) {
   //console.log(res.data)
   wx.hideNavigationBarLoading()
   if (message != "") {
    wx.hideLoading()
   }
   if (res.statusCode == 200) {
    success(res.data)
   } else {
    fail()
   }

  },
  fail: function (res) {
   wx.hideNavigationBarLoading()
   if (message != "") {
    wx.hideLoading()
   }
   fail()
  },
  complete: function (res) {

  },
 })
}
module.exports = {
 request: request,
 requestLoading: requestLoading
}

Copy after login

is very simple to use, as follows

//路径根据自己项目路径修改
var network = require("/utils/network.js")
getData:function(){
  network.requestLoading(URL.MY_SCORE, that.data.params, &#39;正在加载数据&#39;, function (res) {
  //res就是我们请求接口返回的数据
   console.log(res)
  }, function () {
   wx.showToast({
    title: &#39;加载数据失败&#39;,
   })
  })
}

Copy after login

The above is the detailed content of WeChat applet implements a code example of simple encapsulation of network requests. For more information, please follow other related articles on the PHP Chinese website!