Detailed explanation and example code of WeChat applet http request encapsulation

WeChat applet http request 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 applet Basic http request code. In actual code, if it is more cumbersome to write like this every time, then we will do some encapsulation.

What do we pay more attention to in the code?

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

What don’t we 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
}

1. Call in the page (take GET request as Example)

  //导入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 () {
     //失败后的逻辑

    },
  })

Thank you for reading, I hope it can help everyone, thank you for your support of this site!

For more WeChat applet http request encapsulation details and example code related articles, please pay attention to the PHP Chinese website!