微信小程序  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 相关文章推荐
List all the Databases on a SQL Server
Jun 21 Javascript
jQuery.extend 函数的详细用法
Jun 27 Javascript
jQuery实现MSN中文网滑动Tab菜单效果代码
Sep 09 Javascript
浅析JavaScript中浏览器的兼容问题
Apr 19 Javascript
JS中常用的输出方式(五种)
Jun 12 Javascript
jQuery实现立体式数字动态增加(animate方法)
Dec 21 Javascript
jQueryMobile之窗体长内容的缺陷与解决方法实例分析
Sep 20 jQuery
VUE2.0+ElementUI2.0表格el-table实现表头扩展el-tooltip
Nov 30 Javascript
vue项目首屏打开速度慢的解决方法
Mar 31 Javascript
vue--vuex详解
Apr 15 Javascript
element-ui树形控件后台返回的数据+生成组织树的工具类
Mar 05 Javascript
JS实现时间校验的代码
May 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
Session保存到数据库的php类分享
2011/10/24 PHP
twig里使用js变量的方法
2016/02/05 PHP
php车辆违章查询数据示例
2016/10/14 PHP
php获取目录下所有文件及目录(多种方法)(推荐)
2019/05/14 PHP
jquery简单体验
2007/01/10 Javascript
flexigrid 参数说明
2010/11/23 Javascript
jQuery布局插件UI Layout简介及使用方法
2013/04/03 Javascript
jquery自定义类似$.ajax()的方法实现代码
2013/08/13 Javascript
Javascript中3个需要注意的运算符
2015/04/02 Javascript
javascript基础语法学习笔记
2016/01/04 Javascript
值得分享的轻量级Bootstrap Table表格插件
2016/05/30 Javascript
JavaScript基础之AJAX简单的小demo
2017/01/29 Javascript
JS字符串统计操作示例【遍历,截取,输出,计算】
2017/03/27 Javascript
JS跳转手机站url的若干注意事项
2017/10/18 Javascript
详解Vue+axios+Node+express实现文件上传(用户头像上传)
2018/08/10 Javascript
ES6知识点整理之函数对象参数默认值及其解构应用示例
2019/04/17 Javascript
微信小程序新闻网站详情页实例代码
2020/01/10 Javascript
react 不用插件实现数字滚动的效果示例
2020/04/14 Javascript
Vue如何提升首屏加载速度实例解析
2020/06/25 Javascript
Python 随机生成中文验证码的实例代码
2013/03/20 Python
Python字符串、元组、列表、字典互相转换的方法
2016/01/23 Python
学习Python3 Dlib19.7进行人脸面部识别
2018/01/24 Python
python线程池threadpool使用篇
2018/04/27 Python
python smtplib模块自动收发邮件功能(二)
2018/05/22 Python
pandas 将索引值相加的方法
2018/11/15 Python
python 读写excel文件操作示例【附源码下载】
2019/06/19 Python
python编写计算器功能
2019/10/25 Python
解决python3.x安装numpy成功但import出错的问题
2020/11/17 Python
英国知名的护肤彩妆与时尚配饰大型综合零售电商:Unineed
2016/11/21 全球购物
linux面试题参考答案(6)
2016/06/23 面试题
护士节活动总结
2014/08/29 职场文书
大学生上课迟到检讨书
2014/10/15 职场文书
暑假安全保证书
2015/02/28 职场文书
二十年同学聚会致辞
2015/07/28 职场文书
Python深度学习之Pytorch初步使用
2021/05/20 Python
python基础之类方法和静态方法
2021/10/24 Python