微信小程序网络请求的封装与填坑之路
来源:互联网 发布:新网域名管理密码 编辑:程序博客网 时间:2024/05/17 02:12
以前写过一篇关于微信小程序上拉加载,上拉刷新的文章,今天写的是关于小程序网络请求的封装。
在这里首先声明一个小程序文档的bug,导致大伙们在请求的时候,服务器收到不到参数的问题
示例代码:wx.request({ url: 'test.php', //仅为示例,并非真实的接口地址 data: { x: '' , y: '' }, header: { 'Content-Type': 'application/json' }, success: function(res) { console.log(res.data) }})
其中header 中的Content-Type,应该用小写content-type才能让服务器收到参数。让我折腾的好久,改了服务器仍然不行,原来是这个问题。参数在request payload中,服务器不能收到,使用如下转换之后
function json2Form(json) { var str = []; for(var p in json){ str.push(encodeURIComponent(p) + "=" + encodeURIComponent(json[p])); } return str.join("&"); }
最终还是认为是content-type的问题。最后改小写就ok,觉得微信这么牛逼的团队,犯了一个很低级 的错误,把我开发者折腾的爬了。不说,上代码吧。
1 、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、测试用例
2.1 get请求
//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请求
//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 ); });
效果
2 0
- 微信小程序网络请求的封装与填坑之路
- 微信小程序之网络请求简单封装
- 微信小程序实践(二)网络请求的封装
- 【微信小程序】网络请求接口封装实例
- 使用NSURLConnection的网络请求与封装
- iOS之网络请求的简单封装
- 线程之网络请求的封装
- 小程序-网络请求封装
- 微信小程序之网络请求
- 网络请求的封装
- 封装的网络请求
- 网络请求的封装
- 网络请求的封装
- 微信小程序之封装请求函数
- 微信小程序之网络请求(POST请求)
- 微信小程序开发填坑,优雅地处理用户的误操作引起的多次请求
- 微信小程序填坑之路(三)--上传头像
- 微信小程序开发之新手填坑
- C#反射操作常用方法
- Android - ScrollView 监听滑动停止,顶部还是底部?
- 常见130个java
- CPU内中断和外中断
- 华山游记
- 微信小程序网络请求的封装与填坑之路
- 洛谷 P1439 排列LCS问题
- 1613-3-傅溥衍 总结《2016年11月15日》【连续四十六天总结】
- myeclipse下搭建web服务器
- 2058: [Usaco2010 Nov]Cow Photographs
- 网易视频云:分布式视频处理集群中的作业调度
- JVM基础(6)——G1收集器及G1日志分析
- POJ 3278 Catch That Cow【BFS】
- Android Studio Gradle使用笔记