Detailed example of http request encapsulation in WeChat applet development

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 basic http request code of the applet. In the actual code, if this happens every time It is relatively cumbersome to write, 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 parameters are processed uniformly (for example: encryption, setting public Parameters...)

4. Data returned successfully (for example: decryption, extraction of logical layer data)

5. Feedback on failed request

What we don’t pay attention to ?

1. Request url (generally fixed configuration somewhere)

2. Make different request parameters according to different interface rules (for example: 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 an 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 () {
     //失败后的逻辑


    },
  })

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