Encapsulation of WeChat applet network requests-Mini Program Development-php.cn

Encapsulation of WeChat applet network requests

巴扎黑

Release： 2017-09-19 09:21:10

Original

2062 people have browsed it

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: &#39;test.php&#39;, //仅为示例，并非真实的接口地址
 data: {
 x: &#39;&#39; ,
 y: &#39;&#39;
 },
 header: {
 &#39;Content-Type&#39;: &#39;application/json&#39;
 },
 success: function(res) {
 console.log(res.data)
 }
})

Copy after login

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("&"); 
}

Copy after login

picture : 1.png

Encapsulation of WeChat applet network requests

#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 &#39;util.js&#39;;
/**
 * url 请求地址
 * success 成功的回调
 * fail 失败的回调
 */
function _get( url, success, fail ) {
  
 console.log( "------start---_get----" );
 wx.request( {
 url: url,
 header: {
  // &#39;Content-Type&#39;: &#39;application/json&#39;
 },
 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: {
 &#39;content-type&#39;: &#39;application/x-www-form-urlencoded&#39;,
 },
 method:&#39;POST&#39;,
 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: {
  &#39;content-type&#39;: &#39;application/json&#39;,
 },
 method:&#39;POST&#39;,
 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
}

Copy after login

2, Test case
2.1 get request

//GET方式
let map = new Map();
map.set( &#39;receiveId&#39;, &#39;0010000022464&#39; );
let d = json_util.mapToJson( util.tokenAndKo( map ) );
console.log( d );
var url1 = api.getBaseUrl() + &#39;SearchTaskByReceiveId?data=&#39;+d;
network_util._get( url1,d,
function( res ) {
console.log( res );
that.setData({
 taskEntrys:res.data.taskEntrys
});
}, function( res ) {
console.log( res );
});

Copy after login

2.2 POST request

//Post方式
 let map = new Map();
 map.set( &#39;receiveId&#39;, &#39;0010000022464&#39; );
 let d = json_util.mapToJson( util.tokenAndKo( map ) );
 console.log( d );
 var url1 = api.getBaseUrl() + &#39;SearchTaskByReceiveId&#39;;
 network_util._post( url1,d,
 function( res ) {
 console.log( res );
 that.setData({
  taskEntrys:res.data.taskEntrys
 });
 }, function( res ) {
 console.log( res );
 });

Copy after login

Picture: 2.png

Encapsulation of WeChat applet network requests

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!