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

巴扎黑
Libérer: 2017-08-17 14:56:46
original
1455 Les gens l'ont consulté
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) }})
Copier après la connexion

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("&"); }
Copier après la connexion

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 &#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}
Copier après la connexion

2. Cas de test
2.1 Obtenir la requête
//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 );});
Copier après la connexion

2.2 Demande POST
//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 ); });
Copier après la connexion

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal