微信小程序 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 相关文章推荐
背景音乐每次刷新都可以自动更换
Feb 01 Javascript
学习ExtJS Panel常用方法
Oct 07 Javascript
页面版文本框智能提示JS代码
Nov 20 Javascript
JavaScript中函数声明优先于变量声明的实例分析
Mar 01 Javascript
下拉列表选择项的选中在不同浏览器中的兼容性问题探讨
Sep 18 Javascript
解析Javascript中中括号“[]”的多义性
Dec 03 Javascript
JS模式之单例模式基本用法
Jun 30 Javascript
JavaScript实现获取用户单击body中所有A标签内容的方法
Jun 05 Javascript
详解vue中的父子传值双向绑定及数据更新问题
Jun 13 Javascript
ES6中异步对象Promise用法详解
Jul 31 Javascript
vue-cli设置css不生效的解决方法
Feb 07 Javascript
vue router-link 默认a标签去除下划线的实现
Nov 06 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
php使用mb_check_encoding检查字符串在指定的编码里是否有效
2013/11/07 PHP
用Zend Studio+PHPnow+Zend Debugger搭建PHP服务器调试环境步骤
2014/01/19 PHP
ThinkPHP中关联查询实例
2014/12/02 PHP
php计算title标题相似比的方法
2015/07/29 PHP
PHP接口类(interface)的定义、特点和应用示例
2020/05/18 PHP
jquery.ui.draggable中文文档(原文翻译)
2013/11/15 Javascript
实现51Map地图接口(示例代码)
2013/11/22 Javascript
浅析javascript的间隔调用和延时调用
2014/11/12 Javascript
Jquery动态添加输入框的方法
2015/05/29 Javascript
JavaScript获取URL汇总
2015/06/08 Javascript
详解angularJs指令的3种绑定策略
2017/04/13 Javascript
jQuery+HTML5实现WebGL高性能烟花绽放动画效果【附demo源码下载】
2017/08/18 jQuery
使用vue-cli导入Element UI组件的方法
2018/05/16 Javascript
在vue项目中利用popstate处理页面返回的操作介绍
2020/08/06 Javascript
从源码角度来回答keep-alive组件的缓存原理
2021/01/18 Javascript
python在windows下实现备份程序实例
2014/07/04 Python
python通过pip更新所有已安装的包实现方法
2017/05/19 Python
python使用socket实现的传输demo示例【基于TCP协议】
2019/09/24 Python
Python shutil模块用法实例分析
2019/10/02 Python
Python字节单位转换实例
2019/12/05 Python
Tensorflow实现部分参数梯度更新操作
2020/01/23 Python
python实现密码强度校验
2020/03/18 Python
在keras中实现查看其训练loss值
2020/06/16 Python
Django DRF APIView源码运行流程详解
2020/08/17 Python
python使用隐式循环快速求和的实现示例
2020/09/11 Python
Python通过类的组合模拟街道红绿灯
2020/09/16 Python
实例讲解CSS3中Transform的perspective属性的用法
2016/04/22 HTML / CSS
CSS3实现水平居中、垂直居中、水平垂直居中的实例代码
2020/02/27 HTML / CSS
Sofft鞋官网:世界知名鞋类品牌
2017/03/28 全球购物
TripAdvisor土耳其网站:全球知名旅行社区,真实旅客评论
2017/04/17 全球购物
英国No.1体育用品零售商:SportsDirect.com
2019/10/16 全球购物
主题教育活动总结
2014/05/05 职场文书
2015年中学元旦晚会活动方案
2014/12/09 职场文书
优秀护士事迹材料
2014/12/25 职场文书
党支部审查意见
2015/06/02 职场文书
Python 可迭代对象 iterable的具体使用
2021/08/07 Python