Home > Article > WeChat Applet > 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
Picture: 3.png
Effect
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!