微信小程序 wx.request(接口调用方式)详解及实例


Posted in Javascript onNovember 23, 2016

微信小程序 wx.request----接口调用方式

    最近开发了一个微信小程序版的任务管理系统,在向Java后台发送接口时遇到了一些问题,在这里做一个简单的总结。

官方接口

官方给出的接口叫做wx.request,请求方式比较简单,下面是官网给出的请求实例。

wx.request({
 url: 'test.php', //仅为示例,并非真实的接口地址
 data: {
   x: '' ,
   y: ''
 },
 header: {
   'content-type': 'application/json'
 },
 success: function(res) {
  console.log(res.data)
 }
})

存在的问题

wx.request请求的header中content-type默认为application/json,如果我们想换种方式比如用"application/x-www-form-urlencoded"会发现在请求头信息中并没有取代默认的application/json而是新增了这种方式,另外在用jquery.ajax请求时即便同样使用application/json方式来请求,得到的数据格式也不相同,无论用什么请求方式ajax都会将请求数据转换为&name1=value1&name2=value2的形式,这样在根据content-type来解析请求数据时就会出现问题,不知道微信是有意这样做还是它根本就是个bug。总之是给我带来了不必要的麻烦。

微信小程序发送的是https请求,在本地调试时可以用http,如果放在手机上测试时校验请求方式和域名,不合法会报以下错误:

微信小程序 wx.request(接口调用方式)详解及实例

为了方便请求,可以对wx.request做一个简单的封装,这样我们再调用的时候就方便了许多,代码如下:

var app = getApp();
function request(url,postData,doSuccess,doFail,doComplete){
   var host = getApp().conf.host;
   wx.request({
    url: host+url,
    data:postData,
    method: 'POST', 
    success: function(res){
     if(typeof doSuccess == "function"){
       doSuccess(res);
     }
    },
    fail: function() {
     if(typeof doFail == "function"){
       doFail();
     }
    },
    complete: function() {
     if(typeof doComplete == "function"){
       doComplete();
     }
    }
   });
 }
}

module.exports.request = request;

如果一个接口在不同地方频繁用到,原本设想写一个函数,然后将函数暴露供其他js调用,但后来发现wx.request中设置async是无效的,只能发异步请求,所以如果想写一个函数来返回调用接口得到的数据就比较难实现。

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
javascript最常用与实用的创建类的代码
Aug 12 Javascript
JavaScript 拾碎[三] 使用className属性
Oct 16 Javascript
js和html5实现手机端刮刮卡抽奖效果完美兼容android/IOS
Nov 18 Javascript
jQuery实现流动虚线框的方法
Jan 29 Javascript
简易的投票系统以及js刷票思路和方法
Apr 07 Javascript
学习JavaScript设计模式(多态)
Nov 25 Javascript
使用PBFunc在Powerbuilder中支付宝当面付款功能
Oct 01 Javascript
JavaScript的事件机制详解
Jan 17 Javascript
JS设计模式之惰性模式(二)
Sep 29 Javascript
解决element-ui中下拉菜单子选项click事件不触发的问题
Aug 22 Javascript
Vue异步组件处理路由组件加载状态的解决方案
Sep 07 Javascript
微信小程序学习总结(一)项目创建与目录结构分析
Jun 04 Javascript
利用jquery获取select下拉框的值
Nov 23 #Javascript
JQuery和PHP结合实现动态进度条上传显示
Nov 23 #Javascript
ionic进入多级目录后隐藏底部导航栏(tabs)的完美解决方案
Nov 23 #Javascript
JQueryEasyUI之DataGrid数据显示
Nov 23 #Javascript
详解获取jq ul第一个li定位的四种解决方案
Nov 23 #Javascript
jquery实现点击页面回到顶部
Nov 23 #Javascript
通过原生JS实现为元素添加事件的方法
Nov 23 #Javascript
You might like
php5编程中的异常处理详细方法介绍
2008/07/29 PHP
php使用$_POST或$_SESSION[]向js函数传参
2014/09/16 PHP
WordPress中访客登陆实现邮件提醒的PHP脚本实例分享
2015/12/14 PHP
轻松掌握php设计模式之访问者模式
2016/09/23 PHP
PHP通过CURL实现定时任务的图片抓取功能示例
2016/10/03 PHP
Laravel 的数据库迁移的方法
2017/07/31 PHP
基于jQuery UI CSS Framework开发Widget的经验
2010/08/21 Javascript
js中访问html中iframe的文档对象的代码[IE6,IE7,IE8,FF]
2011/01/08 Javascript
Yii-自定义删除确认弹框(zyd)jquery实现代码
2013/03/04 Javascript
常见浏览器多长时间会提示“脚本运行时间过长”总结
2014/04/29 Javascript
基于HTML+CSS,jQuery编写的简易计算器后续(添加了键盘监听)
2016/01/05 Javascript
BootstrapTable与KnockoutJS相结合实现增删改查功能【二】
2016/05/10 Javascript
详谈jQuery中的一些正则匹配表达式
2017/03/08 Javascript
10道典型的JavaScript面试题
2017/03/22 Javascript
实现div滚动条默认最底部以及默认最右边的示例代码
2017/11/15 Javascript
详解js删除数组中的指定元素
2018/10/31 Javascript
python抓取并保存html页面时乱码问题的解决方法
2016/07/01 Python
Django自定义分页效果
2017/06/27 Python
python中文分词,使用结巴分词对python进行分词(实例讲解)
2017/11/14 Python
python通过getopt模块如何获取执行的命令参数详解
2017/12/29 Python
Python简单实现控制电脑的方法
2018/01/22 Python
Python用61行代码实现图片像素化的示例代码
2018/12/10 Python
Python爬虫实现的根据分类爬取豆瓣电影信息功能示例
2019/09/15 Python
Python模块的制作方法实例分析
2019/12/21 Python
python-sys.stdout作为默认函数参数的实现
2020/02/21 Python
使用Jupyter notebooks上传文件夹或大量数据到服务器
2020/04/14 Python
解决在keras中使用model.save()函数保存模型失败的问题
2020/05/21 Python
全球速卖通巴西站点:Aliexpress巴西
2016/08/24 全球购物
Kent & Curwen:与大卫·贝克汉姆合作
2017/06/13 全球购物
意大利在线大学图书馆:Libreria universitaria
2019/07/16 全球购物
文职个人求职信范文
2013/09/23 职场文书
韩国商务邀请函
2014/01/14 职场文书
视光学毕业生自荐书范文
2014/02/13 职场文书
《挑山工》的教学反思
2014/02/16 职场文书
ktv好的活动方案
2014/08/15 职场文书
2016年教师新年寄语
2015/08/18 职场文书