Maison >Applet WeChat >Développement de mini-programmes >Tutoriel d'encapsulation de requêtes réseau pour le développement de mini-programmes

Tutoriel d'encapsulation de requêtes réseau pour le développement de mini-programmes

巴扎黑
巴扎黑original
2017-08-17 14:56:461470parcourir
Ici, nous déclarons d'abord un bug dans le document du mini programme, qui empêche le serveur de recevoir les paramètres lors des requêtes
Exemple de code :
wx.request({
 url: 'test.php', //仅为示例,并非真实的接口地址
 data: {
 x: '' ,
 y: '' },
 header: { 'Content-Type': 'application/json' },
 success: function(res) {
 console.log(res.data) }})

Le type de contenu dans l'en-tête, vous devez utiliser Type de contenu en minuscules pour permettre au serveur de recevoir des paramètres. J'ai du mal depuis longtemps et cela ne fonctionne toujours pas après avoir changé de serveur. Il s'avère que c'est là le problème. Le paramètre est dans la charge utile de la requête et le serveur ne peut pas le recevoir Après avoir utilisé la conversion suivante
function json2Form(json) { 
 var str = []; 
 for(var p in json){ 
 str.push(encodeURIComponent(p) + "=" + encodeURIComponent(json[p])); 
 } 
 return str.join("&"); }

Image : 1.png

Tutoriel d'encapsulation de requêtes réseau pour le développement de mini-programmes

Au final, j'ai pensé que c'était un problème de type de contenu. En fin de compte, c'était OK de le changer en minuscules. Je pense que WeChat, une équipe tellement géniale, a commis une erreur très stupide, ce qui a tourmenté mon développeur. Ne me dites pas, entrons dans le code.

1. Classe de requête HTTP
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. Cas de test
2.1 Obtenir la requête
//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 Demande POST
//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 ); });

Photo : 2.png

Tutoriel d'encapsulation de requêtes réseau pour le développement de mini-programmes

Effet

Image : 3.png

Tutoriel d'encapsulation de requêtes réseau pour le développement de mini-programmes

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn