WeChat applet http request encapsulation-Mini Program Development-php.cn

WeChat applet http request encapsulation

高洛峰

Release： 2017-02-25 09:25:00

Original

1980 people have browsed it

WeChat applet http request encapsulation

Sample code

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

Copy after login

The above is The basic http request code of the mini program. In the actual code, it would be cumbersome to write it like this every time, so let's encapsulate it.

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 = &#39;http://localhost/loverule/api/api.php&#39;

var requestHandler = {
  params:{},
  success: function(res){
    // success
  },
  fail: function() {
    // fail
  },
}

//GET请求
function GET(requestHandler) {
  request(&#39;GET&#39;,requestHandler)
}
//POST请求
function POST(requestHandler) {
  request(&#39;POST&#39;,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
}

Copy after login

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

    },
  })

Copy after login

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 related articles, please pay attention to the PHP Chinese website!