Detailed explanation of http request encapsulation of WeChat applet

WeChat applet httpRequest encapsulation

Sample code

wx.request({
 url: 'test.php', //仅为示例，并非真实的接口地址
 data: {
   x: '' ,
   y: ''
 },
 method:'POST',
 header: {
   'content-type': 'application/json'
 },
 success: function(res) {
  console.log(res.data)
 },
 fail: function( res ) {
   fail( res );
  }
})

The above is the basic http request code of the applet. In the actual code, if it is written like this every time, It's more complicated, so let's do some encapsulation.

What do we pay more attention to in the code?

1. Request parameters, access interface
2.GET/POST...Request method
3.Request parametersUnified processing (for example: encryption, setting public Parameters...)
4. Data returned after successful request (for example: decryption, extraction of logical layer data)
5. Feedback on failed request

What do we not pay attention to?

1. Request url (generally fixed configuration somewhere)
2. Make different request parameters according to different interface rules (such as parameter encryption, etc.)
...

Let’s practice the code

network.js

var API_URL = 'http://localhost/loverule/api/api.php'
 
var requestHandler = {
  params:{},
  success: function(res){
    // success
  },
  fail: function() {
    // fail
  },
}
 
//GET请求
function GET(requestHandler) {
  request('GET',requestHandler)
}
//POST请求
function POST(requestHandler) {
  request('POST',requestHandler)
}
 
function request(method,requestHandler) {
  //注意：可以对params加密等处理
  var params = requestHandler.params;
 
  wx.request({
   url: API_URL,
   data: params,
   method: method, // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
   // header: {}, // 设置请求的 header
   success: function(res){
    //注意：可以对参数解密等处理
    requestHandler.success(res)
   },
   fail: function() {
    requestHandler.fail()
   },
   complete: function() {
    // complete
   }
  })
}
 
module.exports = {
 GET: GET,
 POST: POST
}

Call in the page (take GET request as an example)

//Import js

var network = require("../../utils/network.js")
 
//写入参数
var params = new Object()
params.api_name = "api_user_login"
params.account = "hanqing"
params.password = "123456"
 
//发起请求
network.GET(
{
  params: params,
  success: function (res) {
   console.log(res)
   //拿到解密后的数据，进行代码逻辑
 
  },
  fail: function () {
   //失败后的逻辑
 
  },
})

The above is the detailed content of Detailed explanation of http request encapsulation of WeChat applet. For more information, please follow other related articles on the PHP Chinese website!