Network request encapsulation tutorial for mini program development

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) }})

The Content-Type in the header should be used Lowercase content-type allows the server to receive 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 Network request encapsulation tutorial for mini program development. For more information, please follow other related articles on the PHP Chinese website!