微信小程序  http请求封装详解及实例代码


Posted in Javascript onFebruary 15, 2017

微信小程序  http请求封装

示例代码

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

以上为小程序的基本http请求代码,实际代码中如果每次这样来写是比较繁琐的,那我们就来做一下封装。

那代码中我们比较关注什么?

1.请求的参数,访问的接口
2.GET/POST...请求方式
3.请求参数统一处理(比如:加密、设置公共参数...)
4.请求成功返回的数据(比如:解密、抽离逻辑层数据)
5.请求失败反馈

我们不关注什么?

1.请求url(一般固定的配置在某个地方)
2.根据不同的接口规则做不同的请求参数(比如:参数加密等)
...

让我们代码实操

network.js

var API_URL = 'http://localhost/loverule/api/api.php'

var requestHandler = {
  params:{},
  success: function(res){
    // success
  },
  fail: function() {
    // fail
  },
}

//GET请求
function GET(requestHandler) {
  request('GET',requestHandler)
}
//POST请求
function POST(requestHandler) {
  request('POST',requestHandler)
}

function request(method,requestHandler) {
  //注意:可以对params加密等处理
  var params = requestHandler.params;

  wx.request({
   url: API_URL,
   data: params,
   method: method, // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
   // header: {}, // 设置请求的 header
   success: function(res){
    //注意:可以对参数解密等处理
    requestHandler.success(res)
   },
   fail: function() {
    requestHandler.fail()
   },
   complete: function() {
    // complete
   }
  })
}

module.exports = {
 GET: GET,
 POST: POST
}

1.页面中调用(以GET请求为例)

//导入js
  var network = require("../../utils/network.js")

  //写入参数
  var params = new Object()
  params.api_name = "api_user_login"
  params.account = "hanqing"
  params.password = "123456"

  //发起请求
  network.GET(
  {
    params: params,
    success: function (res) {
     console.log(res)
     //拿到解密后的数据,进行代码逻辑

    },
    fail: function () {
     //失败后的逻辑

    },
  })

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

Javascript 相关文章推荐
超级简单的图片防盗(HTML),好用
Apr 08 Javascript
如何使用Javascript正则表达式来格式化XML内容
Jul 04 Javascript
简单谈谈javascript代码复用模式
Jan 28 Javascript
Jqgrid之强大的表格插件应用
Dec 02 Javascript
jQuery中的select操作详解
Nov 29 Javascript
基于JavaScript实现拖动滑块效果
Feb 16 Javascript
详解angularjs中如何实现控制器和指令之间交互
May 31 Javascript
JS实现下拉菜单列表与登录注册弹窗效果
Aug 10 Javascript
收集前端面试题之url、href、src
Mar 22 Javascript
vue中的$emit 与$on父子组件与兄弟组件的之间通信方式
May 13 Javascript
Vuex中实现数据状态查询与更改
Nov 08 Javascript
用Golang运行JavaScript的实现示例
Nov 25 Javascript
DOM事件探秘篇
Feb 15 #Javascript
详解Angularjs 如何自定义Img的ng-load 事件
Feb 15 #Javascript
js实现滑动到页面底部自动加载更多功能
Feb 15 #Javascript
JS 实现随机验证码功能
Feb 15 #Javascript
JS实现PC手机端和嵌入式滑动拼图验证码三种效果
Feb 15 #Javascript
javascript设计模式之中介者模式学习笔记
Feb 15 #Javascript
javascript中apply/call和bind的使用
Feb 15 #Javascript
You might like
php 中include()与require()的对比
2006/10/09 PHP
php下使用strpos需要注意 === 运算符
2010/07/17 PHP
基于递归实现的php树形菜单代码
2014/11/19 PHP
php将服务端的文件读出来显示在web页面实例
2016/10/31 PHP
vmware linux系统安装最新的php7图解
2019/04/14 PHP
php设计模式之观察者模式定义与用法经典示例
2019/09/19 PHP
jQuery插件的写法分享
2013/06/12 Javascript
jQuery实现用户注册的表单验证示例
2013/08/28 Javascript
jquery.post用法关于type设置问题补充
2014/01/03 Javascript
jQuery中replaceWith()方法用法实例
2014/12/25 Javascript
纯javascript实现四方向文本无缝滚动效果
2015/06/16 Javascript
如何消除inline-block属性带来的标签间间隙
2016/03/31 Javascript
微信js-sdk地理位置接口用法示例
2016/10/12 Javascript
解析AngularJS中get请求URL出现的跨域问题
2016/12/01 Javascript
AngularJS 购物车全选/取消全选功能的实现方法
2017/08/14 Javascript
实例教学如何写vue插件
2017/11/30 Javascript
JS实现的简单折叠展开动画效果示例
2018/04/28 Javascript
js循环map 获取所有的key和value的实现代码(json)
2018/05/09 Javascript
JS数组降维的实现Array.prototype.concat.apply([], arr)
2020/04/28 Javascript
解决vue项目打包上服务器显示404错误,本地没出错的问题
2020/11/03 Javascript
利用python写个下载teahour音频的小脚本
2017/05/08 Python
Pycharm技巧之代码跳转该如何回退
2017/07/16 Python
Python3中的列表生成式、生成器与迭代器实例详解
2018/06/11 Python
python 实现调用子文件下的模块方法
2018/12/07 Python
Python使用sklearn库实现的各种分类算法简单应用小结
2019/07/04 Python
自定义django admin model表单提交的例子
2019/08/23 Python
Pytest框架之fixture的详细使用教程
2020/04/07 Python
tensorflow常用函数API介绍
2020/04/19 Python
Numpy数组的广播机制的实现
2020/11/03 Python
给海归自荐信的建议
2013/12/13 职场文书
个人自荐书
2013/12/20 职场文书
电厂厂长岗位职责
2014/01/02 职场文书
生产部厂长职位说明书
2014/03/03 职场文书
地质灾害防治方案
2014/05/14 职场文书
优秀少先队员事迹材料
2014/12/24 职场文书
Django cookie和session的应用场景及如何使用
2021/04/29 Python