Encapsulation of WeChat applet network requests

Here we first declare a bug in the mini program document, which causes the server to fail to receive parameters when making requests.
Sample code:

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

Among them The Content-Type in the header should be lowercase content-type so that the server can receive the parameters. I have been struggling for a long time and it still doesn't work after changing the server. It turns out that this is the problem. The parameter is in the request payload and the server cannot receive it. After using the following conversion

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

picture : 1.png

#In the end, I thought it was a content-type problem. In the end, it was OK to change it to lowercase. I feel that WeChat, such an awesome team, made a very stupid mistake, which made me a developer tormented. Don’t tell me, let’s get into the code.
1, Http request class

import util from 'util.js';
/**
 * url 请求地址
 * success 成功的回调
 * 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 请求地址
 * success 成功的回调
 * 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 请求地址
 * success 成功的回调
 * 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 case
2.1 get request

//GET方式
let map = new Map();
map.set( 'receiveId', '0010000022464' );
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

//Post方式
 let map = new Map();
 map.set( 'receiveId', '0010000022464' );
 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 );
 });

Picture: 2.png

Effect

Picture: 3.png

The above is the detailed content of Encapsulation of WeChat applet network requests. For more information, please follow other related articles on the PHP Chinese website!