The path to encapsulation and completion of WeChat applets network requests

Encapsulation and pitfall of network requests of applets

I have previously written an article about small program upload, pull, and refresh. Today I wrote about the encapsulation of small program network requests.

Here, we first declare a bug in the mini-program document, which causes the server to fail to receive the parameter during the request.

Sample Code:

Wx. request ({url: 'test. php ', // only for example. It is not the actual interface address data: {x: '', y:''}, header: {'content-type ': 'application/json'}, success: function (res) {console. log (res. data )}})

The Content-Type in the header must be in lower case for the server to receive parameters. It took me a long time to make it difficult to change the server. It turned out to be a problem. The request payload parameter cannot be received by the server.

function json2Form(json) {  var str = [];  for(var p in json){  str.push(encodeURIComponent(p) + "=" + encodeURIComponent(json[p]));  }  return str.join("&"); } 

In the end, we still think it is the content-type problem. In the end, I changed my mind and I thought that such a great team had made a very low-level mistake, and I had to make great strides for developers. Do not mention the code.

1. Http request class

Import util from 'util. js';/*** url request address * successful callback of success * failed callback of fail */function _ get (url, success, fail) {console. log ("------ start --- _ get ----"); wx. request ({url: url, header: {// 'content-type': 'application/json'}, success: function (res) {success (res );}, fail: function (res) {fail (res) ;}}); console. log ("---- end ----- _ get ----");}/*** url request address * successful callback of success * failed callback of fail */function _ post_from (url, data, success, fail) {console. log ("---- _ post -- start -------"); wx. request ({url: url, header: {'content-type': 'application/x-www-form-urlencoded',}, method: 'post', data: {data: data}, success: function (res) {success (res) ;}, fail: function (res) {fail (res) ;}}); console. log ("---- end ----- _ get ----");}/*** url request address * successful callback of success * failed callback of fail */function _ post_json (url, data, success, fail) {console. log ("---- _ post -- start -------"); wx. request ({url: url, header: {'content-type': 'application/json',}, method: 'post', data: data, success: function (res) {success (res) ;}, fail: function (res) {fail (res) ;}}); console. log ("---- end ---- _ post -----");} module. exports = {_ get: _ get, _ post: _ post, _ post_json: _ post_json}

2. Test Cases

2.1 get request

// GET mode let map = new Map (); map. set ('receiveid', '000000'); let d = json_util.mapToJson (util. tokenAndKo (map); console. log (d); var url1 = api. getBaseUrl () + 'searchtaskbyreceiveid? Data = '+ d; network_util. _ get (url1, d, function (res) {console. log (res); that. setData ({taskEntrys: res. data. taskEntrys}) ;}, function (res) {console. log (res );});

2.2 POST request

// Let map = new Map (); map in Post mode. set ('receiveid', '000000'); let d = json_util.mapToJson (util. tokenAndKo (map); console. log (d); var url1 = api. getBaseUrl () + 'searchtaskbyreceiveid'; network_util. _ post (url1, d, function (res) {console. log (res); that. setData ({taskEntrys: res. data. taskEntrys}) ;}, function (res) {console. log (res );});

Effect

The above is all the content of this article. I hope this article will help you in your study or work. I also hope to provide more support to the customer's home!