Simple encapsulation of network requests in WeChat applet

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)

  
  

##For data security, WeChat applet network Requests only support https. Of course, the meaning of each parameter will not be explained in detail. If you are not familiar with it, you can read the network request API of the official document. When we use request, the content-typ of the header defaults to application/json, which is pointed out in the document. The value of method must be in uppercase, but after testing, the request can also be successful in lowercase. The default timeout for request is 60s. If we want to customize the timeout, we can add the following code snippet to app.json to set the timeout for request, socket, and uploaded files and downloaded files respectively.

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

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 is in When running 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: {
   'content-type': 'application/x-www-form-urlencoded'
  },
  method: 'post',
  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) {

  },
 })
}

The above function is easy to understand. The meaning of the parameters has been explained in the code. Before the network request starts , first displays the Loading dialog box, prompting 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)
}

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: {
   //'Content-Type': 'application/json'
   'content-type': 'application/x-www-form-urlencoded'
  },
  method: 'post',
  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
}

is very simple to use, as follows

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

The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

Introduction to parsing web content in WeChat mini programs

About analysis of frames in WeChat mini programs

About the encapsulation of the WeChat applet request interface

# #

The above is the detailed content of Simple encapsulation of network requests in WeChat applet. For more information, please follow other related articles on the PHP Chinese website!